CSS Functions

CSS has a list of inbuilt functions that can be used as the value for different CSS properties. Here’s the list of the functions with a small description for each one of them.

Sr NoFunctionsDescription
attr()Can be used to retrieve the value of any attribute for a particular element. You can give the attribute name as the argument.
calc()The values for CSS properties can be calculated using this function. Comes very handy while calculating the dimensional properties like height, width etc.
cubic-bezier()It is used to define a curve called the cubic-bezier curve. It takes 4 points as arguments and can be used define transition and animation speed curves
hsl()Another way of defining colors. H-S-L stands for Hue Saturation and Lightness. We can give the values for each as arguments to the hsl() function to get a desired color
hsla()Same as hsl() but here we also have the alpha mode to set.
linear-gradient()Can be used to define a linear gradient of colors. At least two colors need to be passed as arguments. The gradient, top to bottom, goes from first color argument to last color argument

radial-gradient()Defines the radial-gradient of colors. Here also, at least two colors are required. The gradient, center to edge, goes from first color argument to last color argument
We can repeat the linear gradient using this function. Apart from the color arguments we can also need to give color stop values in percentage or length. The color stop values decide the the smooth transitions of the color upto a certain point.
Similar to repeatin-linear-gradient(), except it defines repeating radial gradients. Can also use color stops.

rgb()The RGB mode for defining the colors
rgba()Along with the Red-Green-Blue of RGB, this also has the Alpha mode to define
var()For custom properties, the value can be inserted using this function