Go back
1 min read

🎲 Native Randomness in CSS: What's It Even For?

Experimental CSS random() and random-item() functions: ranges, random selection, synchronization, and ideas for generative interfaces.

🎲 Native Randomness in CSS: What's It Even For?

CSS is getting random() and random-item(), new functions from CSS Values and Units Module Level 5.

Alvaro Montoro explains how they work:

  • random() returns a random value within a specified range (you can specify a step).
  • random-item() picks a random value from a list.

You can “synchronize” the result across properties and elements using shared parameters.

width: random(100px, 500px);
rotate: random(-5deg, 5deg);
color: random-item(red, blue, green);

For now, it’s more of an experiment: partial support is available only in Safari 26.2.

🤔 Why do we need this?

At first glance, it’s a strange idea: why add randomness to CSS when we have JavaScript?

But there are use cases:

  • A decorative scattering of cards or elements.
  • A slightly “organic” feel to an interface (tiny rotations, varying spacing).
  • Generative effects without JavaScript.
  • Visual variations at the CSS level, without additional logic.
  • Variety in skeleton/shimmer effects.

Essentially, CSS is starting to move into the territory of variation and generative UI. It’s too early for production, but the direction is very intriguing.

Read

Copied