CSS Functions

In programming, functions are a series of specific instructions that are packaged together to perform a specific task. For example, a function is JavaScript would have a look typical to this:

function getSum() {
    return 8 + 8;
}

In CSS, however, functions don't have such a complicated structure, but only the following syntax:

.class {
    property_name: function_name(values);
}

Of course the function will take in at least one value, but that's the typical structure for all CSS functions. Below is not an exhaustive list of all CSS functions, but they are the most commonly used ones. For a comprehensive list, visit the MDN Docs.

calc()

This allows you to perform calculations to determine CSS property values. It has the following syntax:

selector {
    property_name: calc(valueOne + valueTwo)
}

You can perform any kind of arithmetic operation using the calc() function. However, you MUST make sure to add a space before and after the Mathematical symbol you are using. Look at the two examples below:

/* Example 1 */
section {
    height: calc(100vh-20px);
}
 
/* Example 2 */
section {
    height: calc(100vh - 50px);
}

Example 1 will not evaluate because of wrong syntax. Example 2, however, will evaluate correctly.

conic-gradient()

Creates a color transition rotated about a center point - a conic gradient. For example:

section {
    background-image: conic-gradient(orange, yellow);
}

You must define at least two color stops for the conic gradient.

More about Conic Gradient in Color Gradients.

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()

Creates a linear gradient

max()

Uses the largest value, from a comma-separated list of values, as the property value

min()

Uses the smallest value, from a comma-separated list of values, as the property value

radial-gradient()

Creates a radial gradient

repeating-conic-gradient()

Repeats a conic gradient

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. This is usually used to pass values that have been declared as global variables to properties.