CSS `random()`: Add playful variation without breaking layout
www.smashingmagazine.com
The CSS random() function adds visual variation in the browser, without JavaScript or Sass loops. Brecht De Ruyte demonstrates it with subtly tilted letters, cards animated on scroll, and shadows that respond to card rotation. A caching key can keep multiple properties in sync, while sibling-index() calculates the structure of a fanned-out card stack.
These effects are best suited to decorative elements: the article advises against randomizing grids, body text, or interactive targets. With browser support still rolling out, it recommends a stable baseline enhanced through @supports, and stresses respecting prefers-reduced-motion and screen-reader access.
