mod() CSS function

Baseline 2024

Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The mod() CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

The calculation is a - (Math.floor(a / b) * b). For example, the CSS mod(21, -4) function returns the remainder of -3. The full calculation is 21 - (Math.floor(21 / -4) * -4). When dividing 21 by -4, the result is -5.25. This is floored to -6. Multiplying -6 by -4 is 24. Subtracting this 24 from the original 21, the remainder is -3.

Syntax

css
/* Unitless <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

/* Unit based <percentage> and <dimension> */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - if root font-size is 16px */

/* Negative/positive values */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */

/* Calculations */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */

Parameters

The mod(dividend, divisor) function accepts two comma-separated values as its parameters. Both parameters must have the same type, number, dimension, or <percentage>, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as <length>, <angle>, <time>, or <frequency> to be valid.

dividend

A calculation that resolves to a <number>, <dimension>, or <percentage> representing the dividend.

divisor

A calculation that resolves to a <number>, <dimension>, or <percentage> representing the divisor.

Return value

Returns a <number>, <dimension>, or <percentage> (corresponds to the parameters' type) representing the modulus, that is, the operation left over.

If divisor is 0, the result is NaN.
If dividend is infinite, the result is NaN.
If divisor is positive the result is positive (0⁺), and if divisor is negative the result is negative (0⁻).

Formal syntax

<mod()> =
mod( <calc-sum> , <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
This syntax reflects the latest standard as per CSS Values and Units Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.