CSS Functions

CSS Functions
Published on 2021-07-09 03:35:16

calc() function

Accepts a mathematical expression and returns a numerical value.

It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to calculate the value of an attribute. +, -, /, and * operators can all be used, and parentheses can be added to specify the order of operations if necessary.

Use calc() to calculate the width of a div element:

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;

Use calc() to determine the position of a background-image:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Use calc() to determine the height of an element:

height: calc(100% - 20px);


attr() function

Returns the value of an attribute of the selected element.

Below is a blockquote element that contains a character inside a data-* attribute which CSS can use (e.g. inside the ::before and ::after pseudo-element) using this function.

<blockquote data-mark='"'></blockquote>

In the following CSS block, the character is appended before and after the text inside the element:

blockquote[data-mark]::after {
content: attr(data-mark);


var() function

The var() function allows CSS variables to be accessed.

/* set a variable */
:root {--primary-color: blue;
/* access variable */
selector {
color: var(--primary-color);

This feature is currently under development. Check caniuse.com for the latest browser support.


radial-gradient() function

Creates an image representing a gradient of colors radiating from the center of the gradient radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the gradient, red at the center, then orange, until it is finally yellow at the edges*/


linear-gradient() function

Creates an image representing a linear gradient of colors.

linear-gradient( 0deg, red, yellow 50%, blue);

This creates a gradient going from bottom to top, with colors starting at red, then yellow at 50%, and finishing in blue.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments


2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments


2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments


2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments


2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website