CSS rem() Function

The rem() function is a CSS math function that returns the remainder left over when you divide one number by another.

If you already know about the mod() function, you might be experiencing a bit of déjà vu. Both functions do the exact same basic math: if you divide 10 by 3, they both return a remainder of 1. You provide the dividend (the number being divided) as the first argument, and the divisor (the number you are dividing by) as the second argument.

So, why do we have two different functions for finding a remainder? It all comes down to how they handle negative numbers.

The Difference Between `rem()` and `mod()`

When you introduce negative numbers into your calculations, the two functions diverge based on which sign they choose to inherit for the final result:

The rem() function always takes the sign of the dividend (the first argument).
The mod() function always takes the sign of the divisor (the second argument).

For example, let's look at rem(-5, 3). Because the first number (-5) is negative, the rem() function will return a negative result: -2. If you were to use mod(-5, 3) instead, the result would be a positive 1, because it matches the sign of the positive divisor (3).

This makes rem() the perfect choice when you are building a cyclic pattern that needs to mirror itself across both positive and negative values. In the example below, we use a custom property that ranges from -2 to 2. By using rem(), the negative indices shift the boxes to the left, while the positive indices shift them to the right.

.rem-box {
    background-color: #198754;
    color: white;
    font-weight: bold;
    height: 40px;
    width: 200px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    
    /* 
      1. Find the remainder of the index (--i) divided by 2.
         Because we use rem(), negative indices will yield negative remainders!
      2. Multiply that remainder by 50px to shift the box.
    */
    --shift: rem(var(--i), 2);
    transform: translateX(calc(var(--shift) * 50px));
  }
  
  .rem-box:last-child {
    margin-bottom: 0;
  }

/* Assign a sequence of negative and positive indices */
  .box-neg2 { --i: -2; background-color: #20c997; }
  .box-neg1 { --i: -1; background-color: #0dcaf0; }
  .box-zero { --i: 0;  background-color: #0d6efd; }
  .box-pos1 { --i: 1;  background-color: #6f42c1; }
  .box-pos2 { --i: 2;  background-color: #d63384; }
</style>

<div class="rem-container">
  <div class="rem-box box-neg2">Index -2 (rem: 0)</div>
  <div class="rem-box box-neg1">Index -1 (rem: -1)</div>
  <div class="rem-box box-zero">Index 0 (rem: 0)</div>
  <div class="rem-box box-pos1">Index 1 (rem: 1)</div>
  <div class="rem-box box-pos2">Index 2 (rem: 0)</div>
</div>

View Output Full Screen Preview

How It Works

The rem() function requires two arguments. These arguments must either be the exact same type (like two lengths, two angles, or two times), or one of them must be a unitless number.

Just like the calc() function, rem() evaluates mathematical expressions on the fly. You can write equations directly inside the arguments, such as rem(var(--offset) * 2, 50px).

Official Syntax

The official syntax of the rem() function is as follows:

Possible Values

As indicated in the official syntax, the rem() function accepts two values:

calc-sum (Dividend): The value that is being divided. The function will return a remainder that shares the same positive or negative sign as this value.
calc-sum (Divisor): The value you are dividing by.

CSS Specifications

The rem() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.