How to use the CSS Playground
- 1. Pick a starterChoose centring, a card, gradient text, an animation or responsive columns.
- 2. Edit the CSSChange any value and the preview updates within a moment.
- 3. Save itDownload the result as a single HTML file.
Made for trying CSS ideas
The fastest way to learn CSS is to change one value and see what happens. This playground keeps HTML and CSS next to each other with a preview that refreshes as you type, and a size switch to check phone (375px) and tablet (768px) widths without resizing your window.
It is deliberately CSS-only: scripts are switched off inside the preview, so it stays fast and safe. For JavaScript too, use the online HTML editor.
Worked example: centring with Grid
The first starter centres a box in the middle of the page with just two lines on the body: display: grid; place-items: center; plus height: 100vh so the body fills the screen. Change place-items: center to place-items: start end and the box jumps to the top-right corner.
The other starters each show one technique:
- Card with shadow: a large, soft, low-opacity shadow (0 10px 25px at 8%) looks more modern than a hard dark one.
- Gradient text: a gradient background clipped to the text shape with
background-clip: text. - Keyframe animation: a dot bouncing 40px with
alternateso it goes up and down smoothly. - Responsive columns:
repeat(auto-fit, minmax(140px, 1fr))makes columns wrap on small screens with no media query.
Frequently asked questions
Why don't my scripts run?
Scripts are disabled in this CSS playground. Use the online HTML editor when you need JavaScript.
Can I use Google Fonts?
Yes. Add an @import line at the top of the CSS box.
Is my code saved?
Not automatically. Download it as an HTML file before you leave.
Is it free?
Yes, it is free. Editing needs no form. Downloading the first time asks for your name and WhatsApp number once, across all Uncodemy tools.