CSS Playground
Write CSS and preview the result beside your code.
What is a CSS playground?
A CSS playground pairs a stylesheet with a rendered page so you can see the effect of a rule while you are still typing it. There is no build step, no dev server and no need to reload — the preview is rebuilt from your markup and your CSS string.
It is useful for checking cascade and specificity questions, testing a grid or flex layout at three viewport widths, and finding the one declaration that a browser silently discarded.
How to test CSS in the playground
- Write your rules in the CSS pane, or paste a stylesheet you are debugging.
- Edit the HTML pane to change the markup the styles apply to.
- Leave Auto-run on to refresh the preview as you type, or switch it off and press Run.
- Check the CSS check panel: parse errors point at a line and column, and misspelled property names are listed separately.
- Use Format or Minify to rewrite the stylesheet, then copy it or download it as styles.css.
CSS editing examples
Misspelled property
p {
colour: #333;
}CSS check: Unknown property: colour
Missing colon
a { color red }CSS check: Colon is expected (line 1, column 19)
Minify
a {
color: red;
margin: 0 1px;
}a{color:red;margin:0 1px}CSS playground vs browser DevTools
| Dimension | This playground | DevTools inspector |
|---|---|---|
| Starting point | A blank stylesheet you paste into | A page you already loaded |
| Error reporting | Parse errors line by line before rendering | Invalid declarations silently dropped |
| Sharing | Copy or download the exact CSS | Copy each rule by hand |
| Layout testing | Desktop, tablet and mobile widths | Drag the viewport and step through breakpoints |
| Best for | Isolating a rule, learning specificity | Debugging styles already in production |
CSS playground FAQ
Is my stylesheet uploaded anywhere?
No. css-tree parsing, minification and preview rendering all run inside the browser tab.
Why does the checker accept some invalid CSS?
CSS is designed to be error tolerant: a browser skips a declaration it cannot parse and keeps the rest of the stylesheet. css-tree reports the same recoverable errors instead of failing the whole file.
Which properties are treated as unknown?
Any property name that is not in the CSS specification and does not start with -- or a vendor prefix such as -webkit-. Those two categories are skipped on purpose.
Does Minify change what the CSS does?
No. It regenerates the stylesheet from the parsed tree with comments and insignificant whitespace removed. If the CSS cannot be parsed, Minify leaves it untouched.
Can I use @media queries and modern selectors?
Yes. The preview is a real browser engine, so media queries, container queries, :has() and nesting all behave exactly as they would in production.
Can I take the result with me?
Copy CSS puts the stylesheet on your clipboard, Download .css saves styles.css, and Download page saves a complete HTML file with the styles inlined.