# You can now create true randomness in CSS.

URL: https://theosoti.com/short/css-random-function/
Published: 2026-04-26
Author: Theo Soti

> CSS random() lets you generate values inside a range and share random base values across properties. Powerful idea, but support is still limited.

<img
	src="/short/04-2026/create-true-random.avif"
	alt="Illustration of stars displayed in random size and position, powered by CSS random() function."
	width="400"
	height="600"
	style="margin: 2em auto 1em auto; display: block; border: 4px solid var(--border)"
/>

## You can now create true randomness in CSS.

With `random()` function.

Just CSS picking a value inside a range.

That means you can randomise things like size, position, angle, delay, and more.

And the interesting part is this:

It’s not just chaos.  
`random()` can also share a random base value.  
So multiple properties can stay connected.

For example:  
the same random value for width and height,  
or a consistent variation across several elements.

That makes it much more useful than a simple visual gimmick.

It opens the door to more generative UI,  
more playful layouts,  
and less repetitive styling.

But browser support is still very limited.

MDN marks it as experimental and not Baseline.  
Right now, support is mainly in Safari 26.2+ and iOS Safari 26.2+.  
No Chrome, no Edge, no Firefox for now.

So this is clearly not something to rely on in production yet.

But it’s a very fun glimpse of where CSS is going.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!