The CSS functions that do the most work, grouped by job: compute sizes, read custom properties, mix and pick colors, paint gradients, apply filters, draw shapes, transform boxes, and pick values with logic. Each row pairs the function with a one-line example.
A CSS function takes arguments and returns a value the browser uses. The heavy lifters are calc() for arithmetic, var() for design tokens, clamp() for fluid sizing, and color-mix() for derived colors. Nest them freely: clamp(1rem, var(--fluid), 3rem) is a single responsive value.
Reference table · 62 entries
CSS FunctionsExplained
62 of 62 rows
Sizing & math
The result of an arithmetic expression, with mixed units.
width: calc(100% - 2rem);
The smallest of the given values.
width: min(100%, 60ch);
The largest of the given values.
width: max(320px, 40vw);
A value bounded between a min, a preferred, and a max.
font-size: clamp(1rem, 2vw, 1.5rem);
Reads an environment variable provided by the user agent.
padding: env(safe-area-inset-top);
A size clamped to the content's intrinsic width.
width: fit-content(200px);
Rounds one value to the nearest multiple of another.
width: round(up, 133px, 50px);
The positive remainder of a division, always non-negative.
margin: mod(100px, 30px);
The remainder of a division, keeps the sign of the dividend.
margin: rem(-100px, 30px);
The absolute value.
translateX(abs(-10px));
-1, 0, or 1, matching the sign of the value.
padding: sign(-5px) * 10px;
Grid
A size range for grid tracks, between a min and a max.