CSS Typed Arithmetic: An Introduction to Some Math-Powered CSS

When we talk about CSS typed arithmetic, we refer to a powerful addition to CSS that allows developers to perform mathematical operations on typed values directly within CSS. This means you can now add, subtract, multiply, and divide values with specific units (like px, em, deg, etc.) while respecting their types. This opens up new possibilities for creating responsive designs, dynamic layouts, and complex calculations without relying on JavaScript or hacks.

Let’s checkout a summary table of how typed arithmetic works in CSS.

Alex’s presentation focused on how typed division, like in calc(70px / 10px), is the game-changer here, since it finally lets CSS “cancel units out”, which opens the door for truly dynamic, math-driven design. We will be able to get the result of a calculation as a unitless number, which can then be used in other calculations or properties that expect a number. Let’s see how!

Practical Examples of CSS Typed Arithmetic

Let me show you some of the examples Alex brought up, plus a few more I found interesting. To test all of them properly, I recommend using a tablet or desktop browser and any Chromium-based browser or even Safari. Only Firefox has not supported typed arithmetic yet.

Change Background Color Based on Element Size

We can use typed arithmetic to create a background color that changes based on the size of an element. By measuring a <length> value, calculating a unitless <number> factor, and then using that to compute an <angle> for hue, we can create a dynamic color effect.

.resize-changes-bg {
  /* measure a <length> value */
  --length: clamp(300px, 100cqw, 700px);

  /* calculate a unitless <number> value
       between 0 and 1 */
  --factor: calc((var(--length) - 300px) / 400px);

  /* calculate an <angle> value used for <hue> */
  --hue: calc(360deg * var(--factor));

  /* compose a <color> value */
  background-color: hsl(var(--hue) 100% 50%);
}

Change the rotation of an element based on its width

Similarly, we can change the rotation of an element based on its width using typed arithmetic. By measuring a <length>, calculating a unitless <number>, and then deriving an <angle>, we can rotate the element dynamically.

.resize-changes-rotation {
  --length: clamp(300px, 100cqw, 700px);
  --factor: calc((var(--length) - 300px) / 400px);
  --angle: calc(360deg * var(--factor));
  rotate: var(--angle);
}

This could also apply easily to opacity orto other transform properties like scale or skew. And we can combine multiple effects too! But what if we use this unitless number to change something related to time?

Change the animation duration of an element based on its width

To make this one work, make sure you do not have prefers-reduced-motion enabled in your OS settings, or any other way to disable animations.

.resize-changes-anim-duration {
  --length: clamp(300px, 100cqw, 700px);
  --factor: calc((var(--length) - 300px) / 400px);
  --time: calc(500ms + var(--factor) * 2000ms);
  animation-duration: var(--time);
}

Resizing is cool, but we have some other examples that depend on other factors, like for example angle.

Changing the color based on the angle of rotation

We can also change the color of an element based on its angle of rotation. By measuring an <angle>, calculating a unitless <number>, and then deriving a <length>, we can create a dynamic color effect.

/* define an <angle> value */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

/* change the <angle> value with an animation */
@keyframes rotate {
  0% {
    --angle: 360deg;
  }
  100% {
    --angle: 0deg;
  }
}

.angle-changes-bg {
  --factor: calc(1 - (var(--angle) / 360deg));
  --blue: calc(255 * var(--factor));
  background-color: rgb(0, 0, var(--blue));
}

After the presentation, we discussed that these techniques will become even more powerful when calc-size, or functions make it to baseline CSS. However, I wondered if we could already use this to do something cool with typography.

Changing the font-weight and letter-spacing based on element width

These are particularly useful for responsive typography, where we want to adjust the font weight and letter spacing based on the size of the element.

.resize-changes-font {
  /* 1. Measure a <length> */
  --length: clamp(300px, 100cqw, 700px);

  /* 2. Convert to a 0–1 factor */
  --factor: calc((var(--length) - 300px) / 400px);

  /* 3. Map to a font-weight range 300 → 900 */
  --font-weight: calc(300 + (var(--factor) * 600));

  /* 4. Map to letter-spacing from -0.5px → 4px */
  --letter-spacing: calc(-0.5px + (var(--factor) * 4.5px));

  /* 5. Apply them */
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
}

Conclusion

CSS typed arithmetic is a powerful feature that allows developers to perform mathematical operations on typed values directly within CSS. I think this opens up new possibilities, above all for creative people that go beyond traditional layouts and want to experiment with dynamic, math-driven designs. If I get time, I would love to explore more use cases and share them in future blog posts.