CSS Playground
Learn CSS by Playing
Drag sliders, pick options, and watch CSS happen in real time. When you're happy, click Copy CSS.
Box Model
Control margin, border, padding, and content size. Watch the total space change.
Flexbox
Pick flex properties from dropdowns and see how items arrange themselves.
CSS Grid
Set columns, rows, and gap — watch the grid form. No code required.
CSS Positioning
Switch between position values and drag top/left sliders to see how each one behaves.
relative: Element stays in normal flow but can be nudged with top/left. Other elements don't move.
Typography & Colors
Experiment with fonts, sizes, spacing, and colors. See how typography changes the feel.
The Quick Brown Fox
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Good typography makes content easy to consume and gives your website a professional feel.