# CSS \`random()\`: Add playful variation without breaking layout

Canonical source : [CSS \`random()\`: Add playful variation without breaking layout](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

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.

- Selected on : 2026-10-23

- Resource publication : 2026-10-20

- Entry updated : 2026-11-07T20:32:37+0000

- Format : Article

- Source language : EN

- Credit : https://www.smashingmagazine.com/author/brecht-de-ruyte/

- Found via : [Frontend Focus](<https://frontendfoc.us/>)

Original resource : [CSS \`random()\`: Add playful variation without breaking layout](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

Tags : [CSS](<https://sebastien.rigaux.be/en/tech-watch/tags/css>) · [Animation](<https://sebastien.rigaux.be/en/tech-watch/tags/animation>) · [Accessibility](<https://sebastien.rigaux.be/en/tech-watch/tags/accessibility>) · [Progressive enhancement](<https://sebastien.rigaux.be/en/tech-watch/tags/progressive-enhancement>)

Available versions : [Français](<https://sebastien.rigaux.be/veille/liens/css-random-doser-limperfection-dans-les-interfaces>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

[Back to tech watch](<https://sebastien.rigaux.be/en/tech-watch>)