CSS Functions
CSS functions compute a value inside a declaration — doing math with calc(), reading custom properties with var(), clamping a size with clamp() and more. Here are all 12 functions, each with its syntax and live examples.
| Name | Description |
|---|---|
| calc() | Performs a calculation to produce a CSS value, and uniquely lets you mix units like percentages and pixels. |
| clamp() | Clamps a value between a minimum and maximum while scaling fluidly in between. The one-line tool for fluid typography. |
| hsl() | Defines a color from hue, saturation and lightness, with optional alpha — often the most intuitive color model. |
| linear-gradient() | Creates an image that transitions between two or more colors along a straight line, used as a background. |
| max() | Returns the largest of a list of values, which has the effect of enforcing a minimum size. |
| min() | Returns the smallest of a list of values, which has the effect of capping a size to a maximum. |
| minmax() | Defines a grid track size with a minimum and a maximum bound, the key to responsive grid columns. |
| repeat() | Repeats a grid track pattern a set number of times, or as many as will fit with auto-fit / auto-fill. |
| rgb() | Defines a color from red, green and blue channels, with optional alpha for transparency. |
| translate() | A transform function that moves an element along the X and Y axes without affecting the surrounding layout. |
| url() | References an external resource by its address — most often a background image, font file or SVG. |
| var() | Reads the value of a CSS custom property (variable), with an optional fallback. |