Experimenting with `random()` in CSS

2026-06-25

Kilian Valkhof, on the Polypane blog, explores the new CSS random() function, which returns a random value between a minimum and maximum, with an optional step and an element-scoped keyword for consistent values per element. Demos include a bokeh effect, falling cherry petals, a draggable Polaroid stack, random poetry with if(), and an aurora. It works in Safari 26.2+ and Chromium 148+ behind a flag.

polypane.app/blog/experimenting-with-random-in-css

Tags animation css

June 24
Animating the dialog element using view transitions
Morph a button into a <dialog> by swapping view-transition-name inside startViewTransition().
June 23
Improving card patterns with anchor positioning
A pseudo-element covers the card surface but stops short of the secondary actions.
June 19
The fundamentals and dev experience of CSS @function
Custom functions in CSS: typed arguments, private internals, return validation, and DX gotchas.
June 16
Introducing the field guide to grid lanes
A playground, reference, and six real-world demos for learning CSS grid lanes.
June 15
CSS reacts, JS just listens
A tiny library that exposes runtime state to CSS through custom properties.
June 10
CSS animated SVG maps
Stagger pins, fade in the background, and draw lines with stroke-dasharray and dashoffset.
June 8
Introducing the CSS Property Type Validator Stylelint plugin
A new Stylelint rule validates @property registrations and custom property usage in your workflow.
June 3
CSS is filling the gaps with rules. A way to style gaps in grid and flex
New properties draw animatable lines between grid and flex tracks.