Study · CSS · Patterns

Randomness in CSS

Give repeated marks a little variation with a random angle.

random() chooses a value within a range. Here, each mark gets an angle between −20° and 20°, adding variation to an otherwise regular row.

  1. 01
  2. 02
  3. 03
  4. 04
  5. 05
  6. 06
rotate: random(element-shared, -20deg, 20deg);

The marks remain visible without JavaScript.

Shuffle replaces the marks so the browser chooses fresh values. Where CSS random values are unavailable, a small JavaScript fallback generates the angles instead.