mod() - CSS | MDN

Syntax

/* 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

Specifications

Browser compatibility

See also

• round()
• rem()