C
S
S
HAIKU

About CSS Haiku

What can you create with only 3 CSS properties?

Constraints boost creativity. This is the main idea behind CSS Haiku. The main inspiration for creating this site was this Codepen article from 2015.

How to play?

Select how many divs you want in your markup, then using maximum 3 CSS properties, create something pretty/impressive/weird! You don't need selectors, each CSS property you add, applies to all divs.

You have these additional CSS custom properties to work with:

  • --random: a random number between 0 and 1
  • --index: 0-based index of the current div

Once you are satisfied with the results, share your creation!