Math

Functions that compute a numeric value — a length, angle, time, number or percentage — at used-value time. They can be nested and can mix compatible units.

calc()

Evaluates an expression with + , - , * and / . Addition and subtraction need whitespace around the operator. Mixes units freely as long as the result makes sense.

width: calc(100% - 2rem);
height: calc(100dvh - var(--header));
Full width minus a fixed gutter; full viewport height minus a header.

min(), max()

min() returns the smallest of its comma-separated arguments, max() the largest. Handy for responsive limits without a media query.

width: min(100%, 60rem);   /* never wider than 60rem */
padding: max(1rem, 3vw);    /* at least 1rem */
A fluid value with a hard ceiling or floor.

clamp()

clamp(MIN, PREFERRED, MAX) keeps a value between two bounds — the classic fluid-typography tool. Equivalent to max(MIN, min(PREFERRED, MAX)) .

font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
Type that scales with the viewport but never below 1rem or above 2rem.

round(), mod(), rem()

round(strategy, value, step) rounds value to a multiple of step (strategy nearest , up , down or to-zero ). mod() and rem() give the modulus and remainder; they differ in sign when the operands' signs differ.

Trigonometric functions

sin() , cos() , tan() take an <angle> or <number> (radians); their inverses asin() , acos() , atan() and atan2() return angles. Useful for placing items on a circle.

transform: rotate(atan2(var(--dy), var(--dx)));
Point an element along a vector.

Exponential functions

pow(base, exp) , sqrt() , hypot() (the root of the sum of squares), log() and exp() cover powers and logarithms, taking and returning <number> s.

abs(), sign()

abs() returns the magnitude of a value; sign() returns -1 , 0 or 1 for its sign.