CSS Random Generator

Generative CSS, without the JavaScript tax

Scattered galleries, starfields, randomized card tilts, staggered animation delays - front-end developers have faked all of these for years with JavaScript loops, inline styles and CSS variables set from script. random() moves the dice into the stylesheet: the browser resolves a fresh value per element, per property, per load, with zero script and zero layout thrash.

The sharing controls are what make it a design tool rather than a novelty. A named key ties values together - width and height rolling once, together, so random-sized elements stay square. element-scoped shares within a component only. fixed pins the seed so a design review sees the same "random" layout every time. And the step argument keeps values on a grid: multiples of 10 degrees, whole seconds, even numbers.

Shipping it safely while support lands

random() is Limited Availability today: Chrome 156 ships it, Safari has an early implementation, Firefox is positive but pending. The safe pattern is layered - a static value everyone gets, then the random() declaration for browsers that understand it. This lab writes both layers for you: the modern block to paste as-is, and a fallback block with concrete baked values in nth-child rules, generated from the same ranges, for the browsers still catching up.

How to use this tool

1. Pick what to randomize - position, rotation, size, opacity, delay, hue, or a full particle field.
2. Set the range (and an optional step) and choose how values are shared: per element, inside an element, one global roll, or a pinned seed.
3. Watch the stage: supporting browsers render it with pure CSS random(); everyone else gets an identical baked preview.
4. Copy the modern CSS for the progressive layer, and the fallback CSS for everywhere else.
5. Hit Roll again to re-bake the fallback values until the layout feels right.

Related Tools