In this video i will talk about Functions in CSS.


Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. Some CSS functions even let you nest other functions within them!

Unlike other programming languages, we cannot create our own functions in CSS. That kind of logic is reserved for CSS selectors, which allow you to create powerful conditional styling rules.

As opposed to other programming languages — where the output of a function typically invisibly affects other logic down the line — the output of CSS functions are visual in nature. This output is used to control both layout and presentation of content.

CSS functions are used as a value for various CSS properties.


attr() - Returns the value of an attribute of the selected element

calc() - Allows you to perform calculations to determine CSS property values

cubic-bezier() - Defines a Cubic Bezier curve

hsl() - Defines colors using the Hue-Saturation-Lightness model (HSL)

hsla() - Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)

linear-gradient() - Sets a linear gradient as the background image. Define at least two colors (top to bottom)


radial-gradient() - Sets a radial gradient as the background image. Define at least two colors (center to edges)


repeating-linear-gradient() - Repeats a linear gradient


repeating-radial-gradient() - Repeats a radial gradient


rgb() - Defines colors using the Red-Green-Blue model (RGB)


rgba() - Defines colors using the Red-Green-Blue-Alpha model (RGBA)


var() - Inserts the value of a custom property