CSS mod() Function

CSS mod() Function

The CSS mod() function calculates the modulo of two numeric values, returning a result with the same sign as the divisor.

It is useful for repeating numeric patterns, wrapping values within a range, and calculating cyclic positions. The function accepts compatible CSS numeric values, including numbers, lengths, angles, and times, and can be combined with other CSS mathematical functions.

Syntax

mod(dividend, divisor)

The function requires exactly two comma-separated arguments.

For example:

width: mod(250px, 100px);
margin-left: mod(75px, 30px);
transform: rotate(mod(450deg, 360deg));

The first argument is the value being divided. The second argument is the divisor that determines the modulo range.

For example:

mod(17, 5)

The result is 2.

The mod() function returns a numeric value with the same type as its arguments, subject to CSS type compatibility rules.

Both arguments must have compatible numeric types. For example, two lengths can be compared, but a length and an angle cannot.

Parameters

The mod() function accepts two required arguments.

For example:

mod(20, 6)

The dividend is 20 and the divisor is 6.

The result is 2 because 20 can be expressed as 3 times 6 plus 2.

The divisor must not be zero for a finite modulo result.

Arguments can contain arithmetic expressions or other compatible mathematical functions.

How It Works

The mod() function calculates a remainder using floor division.

Its mathematical definition is:

mod(A, B) = A - B * floor(A / B)

For example:

mod(23, 7)

Since 23 divided by 7 is approximately 3.286, the floor is 3.

The calculation becomes:

23 - 7 * 3 = 2

The result is 2.

For a positive divisor, the result is normally greater than or equal to zero and less than the divisor.

For a negative divisor, the result is normally less than or equal to zero and greater than the divisor.

This sign behavior is an important difference between mod() and rem().

Positive Values

When both arguments are positive, mod() returns the ordinary nonnegative remainder.

For example:

mod(10, 3)  /* 1 */
mod(15, 4)  /* 3 */
mod(20, 5)  /* 0 */
mod(27, 10) /* 7 */

When the dividend is smaller than the positive divisor, the result is the dividend itself:

mod(3, 10) /* 3 */

When the dividend is an exact multiple of the divisor, the result is zero:

mod(24, 6) /* 0 */

These results make modulo calculations useful for repeating numeric sequences.

For example, values from 0 through 9 can be repeated using a positive divisor of 10.

Negative Values

The mod() function returns a result with the same sign as the divisor, except that a zero result may retain a signed zero.

For example:

mod(-10, 3)  /* 2 */
mod(10, -3)  /* -2 */
mod(-10, -3) /* -1 */

Consider:

mod(-10, 3)

The floor of -10 / 3 is -4, so:

-10 - 3 * (-4) = 2

The result is positive because the divisor is positive.

For comparison:

mod(-10, -3)

The floor of -10 / -3 is 3, so:

-10 - (-3 * 3) = -1

The result is negative because the divisor is negative.

This behavior is especially useful for wrapping negative values into a positive range.

Using Length Values

The mod() function supports compatible CSS length values.

For example:

.box {
  width: mod(275px, 100px);
}

The result is 75 pixels.

Another example:

.box {
  margin-left: mod(85px, 30px);
}

The result is 25 pixels.

Compatible length units can be combined:

.box {
  padding-left: mod(50px, 1rem);
}

If the root font size is 16 pixels, the result is 2 pixels because 50 divided by 16 leaves a remainder of 2.

Relative units are resolved according to their normal CSS rules before the modulo calculation is completed.

As with other mathematical functions, the result must be valid for the property receiving it.

Using Angle Values

Modulo calculations are useful for wrapping angles within a complete rotation.

For example:

.box {
  transform: rotate(mod(450deg, 360deg));
}

The result is a rotation of 90 degrees.

Another example:

.box {
  transform: rotate(mod(-45deg, 360deg));
}

The modulo result is 315 degrees.

A rotation of 315 degrees produces the same final orientation as a rotation of -45 degrees, although the specified angle can matter when animations interpolate between rotations.

Angle calculations can also use other supported units:

transform: rotate(mod(1.25turn, 1turn));

The result is 0.25turn, equivalent to 90 degrees.

Use a positive full-turn divisor when a nonnegative wrapped angle is desired.

Using Custom Properties

CSS custom properties can supply reusable values for modulo calculations.

For example:

:root {
  --position: 17;
  --cycle: 5;
}
.box {
  margin-left: calc(mod(var(--position), var(--cycle)) * 10px);
}

The modulo result is 2, so the calculated left margin is 20 pixels.

Another example uses an angle:

:root {
  --rotation: 450deg;
}
.box {
  transform: rotate(mod(var(--rotation), 360deg));
}

The element is rotated by 90 degrees.

Custom properties are useful when a value changes dynamically or is reused across multiple CSS declarations.

The custom property values must produce compatible numeric types when substituted into the function.

Nested Calculations

The mod() function can contain arithmetic expressions and other CSS mathematical functions.

For example:

width: mod(100px + 35px, 50px);

The first argument evaluates to 135 pixels, producing a result of 35 pixels.

Another example combines mod() with max():

width: max(20px, mod(135px, 50px));

The modulo result is 35 pixels, so max() selects 35 pixels.

The function can also be nested inside calc():

margin-left: calc(mod(17, 5) * 10px);

The modulo result is 2, so the margin is 20 pixels.

Additional calculations can be used to adjust the result:

transform: rotate(calc(mod(450deg, 360deg) + 15deg));

The final rotation is 105 degrees.

A separate calc() wrapper is not required for arithmetic directly inside mod().

mod() vs. rem()

The mod() and rem() functions both calculate remainders, but they use different rules for negative values.

The mod() function returns a result with the sign of the divisor.

The rem() function returns a result with the sign of the dividend.

For positive values, the two functions usually produce the same result.

For negative values, the results can differ.

Use mod() when wrapping values into a range determined by the divisor. Use rem() when a remainder based on truncation toward zero is needed.

The CSS rem() function should not be confused with the rem length unit, which is based on the root element's font size.

Example

This example uses mod() to calculate the width of a box from two length values.

HTML:

<div class="mod-demo">
  <div class="mod-demo-box">75px</div>
</div>

CSS:

.mod-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.mod-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: mod(275px, 100px);
  height: 60px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 14px;
}

The browser calculates 275px modulo 100px, producing a width of 75 pixels.

The example demonstrates a length-based modulo calculation without JavaScript.

Angle Example

This example uses mod() to wrap a rotation angle into the range from 0 to less than 360 degrees.

HTML:

<div class="mod-angle-demo">
  <div class="mod-angle-box">Rotate</div>
</div>

CSS:

.mod-angle-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background-color: #f1f3f5;
}
.mod-angle-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 60px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 14px;
  transform: rotate(mod(450deg, 360deg));
}

The calculation returns 90 degrees because 450 degrees contains one complete 360-degree rotation plus 90 degrees.

The resulting element is rotated 90 degrees clockwise around its center.

Common Uses

The mod() function is useful when CSS calculations need repeating or wrapped numeric values.

For example:

.element {
  transform: rotate(mod(810deg, 360deg));
}
.panel {
  margin-left: mod(145px, 40px);
}
.box {
  width: calc(mod(23, 5) * 20px);
}

These expressions calculate a 90-degree rotation, a 25-pixel left margin, and a 60-pixel width.

Modulo calculations are most useful when their inputs can change. For a fixed result, directly specifying the final value may be simpler.

Limitations

The mod() function has several important rules and limitations.

• Exactly two comma-separated arguments are required.
• Both arguments must have compatible numeric types.
• The divisor must be nonzero to produce a finite result.
• The result follows the sign of the divisor, unlike rem().
• The result must be valid for the CSS property receiving it.
• Percentage calculations depend on the property's percentage resolution rules.
• Unsupported browsers may ignore declarations containing the function.
• Modulo calculations do not automatically create repeating visual patterns without an appropriate CSS property or expression.

For example, this is valid:

width: mod(275px, 100px);

The following is invalid because it supplies only one argument:

width: mod(275px);

The following has incompatible numeric types:

width: mod(100px, 30deg);

The following attempts to divide by zero:

width: mod(100px, 0px);

A zero divisor produces an invalid mathematical result rather than a finite length suitable for the width property.

Provide a fallback when supporting browsers that do not implement mod().

Browser Support

The CSS mod() function is Baseline Newly available. Support was introduced across major browser engines beginning in 2023, but older browsers may not recognize it.

Modern versions of Chrome, Edge, Firefox, and Safari support the function.

For example:

.box {
  width: mod(275px, 100px);
}

When compatibility with older browsers is important, provide a fallback declaration:

.box {
  width: 75px;
  width: mod(275px, 100px);
}

Browsers that support mod() calculate the result, while unsupported browsers retain the fallback width.

For current compatibility information, visit Can I Use? and search for CSS mod().

Specifications

The mod() function is defined in the CSS Values and Units Module Level 4 .

The specification defines stepped value functions, including modulo and remainder calculations.

Related CSS functions include rem(), round(), calc(), and abs().