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.

What is the CSS Functions Reference?

A searchable reference for CSS functions including calc(), clamp(), min(), max(), var(), env(), color-mix() and transform functions, with arguments, what each returns and browser support. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Functions Reference

Name: CSS Functions Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

The most useful CSS functions by category

Responsive sizing — math functions:

clamp(min, preferred, max) is the single most useful function for fluid design. The preferred value grows with the viewport (typically a vw value), but never falls below min or exceeds max. For example:

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

This heading is never smaller than 1.5 rem on mobile and never larger than 3 rem on wide screens, with smooth scaling between.

min() and max() each accept multiple comma-separated values and return the smallest or largest that resolves. min(100%, 60ch) caps a paragraph at 60 characters wide but lets it be narrower — equivalent to max-width: 60ch; width: 100% in one declaration.

Grid track sizing:

minmax(min, max) defines a track size range, almost always used inside repeat(). repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as fit, each at least 200 px, filling any remaining space.

Color mixing:

color-mix(in <space>, color1 pct%, color2) blends two colors in a named space. The space changes the result: mixing in oklch produces a perceptually even midpoint while mixing in srgb can produce a desaturated midpoint for complementary colors.

Environment variables:

env(safe-area-inset-bottom) reads device safe-area values set by the browser, essential for full-screen web apps on notched phones. Unlike var(), env() reads browser-supplied variables, not author-defined ones.

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.