CSS Functions

CSS Functions

CSS functions are reusable operations that accept one or more arguments and produce values that CSS properties can use. They make it possible to calculate dimensions, select responsive values, work with colors, create images, transform elements, and perform many other operations.

A CSS function is recognized by its function name followed by parentheses, such as var(), calc(), rgb(), and linear-gradient(). The values inside the parentheses are the function's arguments.

CSS Function Syntax

A CSS function consists of a function name followed immediately by opening and closing parentheses.

property: function(arguments);

For example, the rgb() function can create a color value from red, green, and blue components.

.example {
  color: rgb(0 136 204);
}

The complete function acts as a value for the color property.

Different functions accept different types and numbers of arguments. The syntax required inside the parentheses depends on the individual function.

Function Arguments

The values supplied to a function are called arguments. Arguments can include numbers, percentages, dimensions, colors, custom properties, keywords, or other values supported by that particular function.

.box {
  transform: translateX(30px);
}

In this example, 30px is the argument supplied to translateX().

Some functions accept multiple arguments.

.box {
  transform: translate(30px, 20px);
}

Here, the two arguments determine the horizontal and vertical translation.

Value Functions

Some CSS functions retrieve or produce values that can be used by other declarations. The var() function is a common example.

:root {
  --primary-color: #0088cc;
}
.heading {
  color: var(--primary-color);
}

The var() function retrieves the value of the --primary-color custom property and supplies it to the color property.

Functions allow CSS values to be more flexible than a single fixed keyword, number, color, or dimension.

Math Functions

CSS includes mathematical functions that can calculate or select values. These are especially useful for responsive sizing and layouts.

.content {
  width: calc(100% - 40px);
}

The calc() function performs a calculation using CSS values.

Other commonly used mathematical functions include min(), max(), and clamp().

.one {
  width: min(100%, 800px);
}
.two {
  width: max(300px, 50%);
}
.three {
  font-size: clamp(1rem, 3vw, 2rem);
}

These four functions are covered individually in the following Advanced CSS tutorials.

Color Functions

CSS provides functions for defining and manipulating color values. Familiar examples include rgb(), hsl(), and hwb().

.one {
  color: rgb(0 136 204);
}
.two {
  color: hsl(200 100% 40%);
}
.three {
  color: hwb(200 0% 20%);
}

Modern CSS also includes additional color functions for other color spaces and color operations. The syntax and browser support vary by function.

Regardless of the color notation, the complete function produces a color value that can be used by properties accepting colors.

Image Functions

Some CSS functions generate images. Gradient functions are common examples because CSS creates the image instead of loading it from an external image file.

.banner {
  background-image: linear-gradient(90deg, #0088cc, #02bf57);
}

CSS includes several gradient functions.

.one {
  background-image: linear-gradient(#0088cc, #02bf57);
}
.two {
  background-image: radial-gradient(#0088cc, #02bf57);
}
.three {
  background-image: conic-gradient(#0088cc, #02bf57, #0088cc);
}

Each function produces an image value that can be used with properties such as background-image.

Transform Functions

The transform property uses transform functions to move, rotate, scale, or otherwise transform an element.

.box {
  transform: translateX(30px);
}

Multiple transform functions can be placed in the same declaration.

.box {
  transform: translateX(30px) rotate(10deg) scale(1.1);
}

Common transform functions include translate(), rotate(), scale(), and skew(), along with their related variations.

The order of transform functions matters because the transformations are composed in the order specified.

Filter Functions

The filter property accepts functions that apply graphical effects to an element.

.image {
  filter: grayscale(100%);
}

Several filter functions can be combined in one declaration.

.image {
  filter: grayscale(50%) brightness(110%) contrast(120%);
}

Common filter functions include blur(), brightness(), contrast(), grayscale(), hue-rotate(), and saturate().

Nested Functions

A CSS function can sometimes contain another function as one of its arguments. This is called nesting functions.

:root {
  --content-gap: 40px;
}
.content {
  width: calc(100% - var(--content-gap));
}

Here, var() retrieves the custom property value and supplies it as part of the calculation performed by calc().

Functions can also be nested when defining responsive values.

.content {
  width: min(100%, calc(1200px - var(--content-gap)));
}

When functions are nested, each function must still receive arguments that are valid for its particular syntax.

Functions and Custom Properties

Custom properties work especially well with CSS functions because they allow function arguments to be reused and changed from one location.

:root {
  --spacing: 20px;
  --max-width: 1000px;
}
.content {
  width: min(calc(100% - var(--spacing) * 2), var(--max-width));
}

The custom properties supply values to the nested var(), calc(), and min() functions.

Changing --spacing or --max-width changes the calculation without requiring the entire declaration to be rewritten.

Common CSS Functions

CSS includes many additional functions for layouts, shapes, colors, images, counters, easing, grids, filters, transforms, and other features.

CSS Functions Example

The following example combines several CSS functions. var() retrieves reusable values, min() controls the width, rgb() defines the background color, and rotate() provides a small transform.

:root {
  --card-width: 500px;
  --spacing: 20px;
}
.card {
  width: min(100%, var(--card-width));
  padding: var(--spacing);
  background-color: rgb(235 247 252);
}
.badge {
  transform: rotate(-3deg);
}

Open the example in the editor and change the arguments supplied to the functions. Try changing the maximum card width, spacing, RGB values, or rotation angle and run the example again.