When do I need calc() instead of plain math?

calc() is required whenever you combine different units — like calc(100% - 2rem) — because CSS cannot otherwise add a percentage to a fixed length. It is also handy for keeping arithmetic readable when mixing custom properties and constants.

How is clamp() different from min() and max()?

clamp(min, preferred, max) returns the preferred value but never below the lower bound or above the upper bound. It is equivalent to max(min, min(preferred, max)), and it underpins fluid typography where the font size scales with the viewport but stays within limits.

What color space should I mix in with color-mix()?

color-mix(in , c1 p%, c2 p%) interpolates in whatever space you name. Mixing in oklch or oklab gives perceptually even blends without the muddy midpoints you sometimes get when mixing in sRGB, which is why those spaces are popular for generating tints and shades.

Why is my var() not applying?

var(--name, fallback) only resolves if the custom property is defined and reachable in the cascade for that element. If it is unset and you gave no fallback, the declaration becomes invalid at computed-value time and the property reverts to its inherited or initial value.

Can CSS functions be nested?

Yes. Math and value functions compose freely — for example clamp(1rem, calc(0.5rem + 2vw), 2rem) nests calc() inside clamp(), and you can pass var() into almost any function. Just keep units consistent within each arithmetic expression.

CSS Functions Reference

This is a searchable reference for CSS functions — the parenthesised keywords that compute a value rather than naming a fixed one. It covers the math family (calc(), clamp(), min(), max(), trig and exponential functions), value references (var(), env(), attr()), color functions (rgb(), oklch(), color-mix()), gradients, transforms, grid track functions and easing curves.

How it works

A CSS function is a keyword immediately followed by parentheses containing comma-separated arguments. The engine evaluates the function at computed-value time and substitutes the result wherever the function appears. Functions are typed: calc() and the math functions return a length, number, angle or time depending on their inputs; rgb() and friends return a color; linear-gradient() returns an image; the translate()/scale() family returns a transform. Many functions nest — you can wrap a var() inside a clamp() inside a calc() — as long as the units stay compatible within each arithmetic expression. The newer math functions (round(), mod(), sin(), pow(), hypot()) let you do real trigonometry and rounding directly in the stylesheet.

Tips and gotchas

clamp(min, preferred, max) is the workhorse for responsive sizing; pair a rem floor and ceiling with a vw-based preferred value for fluid type. color-mix() reads best in a perceptual space such as oklch or oklab. var() takes an optional fallback as its second argument, used only when the property is genuinely unset. Watch division and multiplication in calc(): you may only divide by a plain number, and at least one operand of a multiplication must be unitless.

Example

:root { --gap: 1rem; }

.title {
  font-size: clamp(1.5rem, calc(1rem + 3vw), 3rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--gap, 1rem);
}

.tint { background: color-mix(in oklch, royalblue 70%, white); }

Everything runs in your browser; nothing you search is uploaded.

CSS Functions Reference

Email me this result

How it works

Tips and gotchas

Example