CSS Playground

A blank CSS editor with a live demo page. Edit the styles at the top and the preview updates as you type — the demo HTML below the styles is there to give your CSS something to work on.

Try it yourself
Result

Ideas to try

  • Change --accent to an oklch() colour (lesson 10).
  • Give the cards a shadow and a hover effect with a transition (lessons 18 and 37).
  • Turn the grid into a Flexbox row that wraps (lesson 27).
  • Add a dark theme with light-dark() (lesson 46).
  • Make the heading size fluid with clamp() (lesson 14).
PreviousProject: Landing Page