Math

calc()

Evaluates an arithmetic expression with +, -, * and /, and can mix units, such as a percentage minus a fixed length. + and - need whitespace on both sides; * and / do not.

A <calc-sum> is the expression itself: values, nested math functions and brackets joined by the four operators. Inside any math function you can also use these constant keywords:

width: calc(100% - 2rem);
height: calc(100dvh - var(--header));
z-index: calc(infinity);

min(), max()

min() returns the smallest of its comma-separated arguments and max() the largest. Together they set responsive limits without a media query.

width: min(100%, 60rem);   /* never wider than 60rem */
padding: max(1rem, 3vw);    /* never less than 1rem */

clamp()

Keeps a preferred value between a minimum and a maximum: clamp(MIN, VAL, MAX) is the same as max(MIN, min(VAL, MAX)). Either bound can be none to leave that side open.

font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

If the minimum is larger than the maximum, the minimum wins.

round()

Rounds a value to the nearest multiple of a step. The optional first argument is the rounding strategy: nearest (the default), up, down or to-zero.

The step can be left out only when the value is a plain number, and then defaults to 1.

width: round(up, 37.5vw, 8px);

mod(), rem()

The modulus and the remainder of dividing the first argument by the second. They only differ when the signs differ: the result of mod() takes the sign of the divisor, the result of rem() the sign of the dividend, so mod(-5, 3) is 1 and rem(-5, 3) is -2.

sin(), cos(), tan()

The sine, cosine and tangent of an angle. The argument is an <angle>, or a plain number read as radians. Useful for placing items around a circle.

translate: calc(cos(var(--angle)) * 8rem) calc(sin(var(--angle)) * 8rem);

asin(), acos(), atan()

The inverse trigonometric functions: each takes a number and returns the angle whose sine, cosine or tangent it is.

atan2()

The angle of the vector from the origin to the point (x, y), given as atan2(y, x). The two arguments can be any type as long as they match, so lengths work.

rotate: atan2(var(--dy), var(--dx));

pow()

Raises the first number to the power of the second. Handy for modular type scales.

font-size: calc(1rem * pow(1.25, var(--step)));

sqrt()

The square root of a number.

hypot()

The square root of the sum of the squares of its arguments: the length of a vector. Unlike sqrt(), the arguments can be lengths or any other matching type.

log()

The logarithm of the first number. With one argument it is the natural logarithm; a second argument sets the base.

exp()

The constant e raised to the power of the argument.

abs()

The absolute value of its argument: the same value with any minus sign removed.

sign()

The sign of its argument: -1 if negative, 1 if positive and 0 if zero. Useful for flipping a direction based on another value.

calc-size()

Does arithmetic on an intrinsic size such as auto, fit-content or max-content. The first argument is the basis; in the second, the keyword size stands for that basis. Because the result is a definite size, it can be transitioned, which is how you animate height to and from auto.

height: calc-size(auto, size + 2rem);

progress()

How far a value lies between a start and an end, as a number: progress(value, start, end) is (value - start) / (end - start), clamped to the range 0 to 1. Pair it with other math to map one range onto another.

Firefox also accepts the leading no-clamp keyword, which lets the result go below 0 or above 1.

opacity: progress(100vw, 320px, 1200px);

random()

A random value between a minimum and a maximum, optionally rounded to a step given as the last argument. The optional first argument, a key, controls which uses share the same random value.

rotate: random(-10deg, 10deg);

sibling-index(), sibling-count()

sibling-index() is the element's position among its parent's element children, starting at 1. sibling-count() is the number of those children, including the element itself. Both work inside other math, which makes staggered delays and evenly spread layouts easy.

li { transition-delay: calc((sibling-index() - 1) * 50ms); }