CSS Validator
Beautify, minify, validate, and convert CSS-family source in one place.
Beautify, minify, validate, and convert CSS-family source in one place.
Paste a stylesheet and the Validate operation counts every { against every }. If the totals match it reports Looks valid: braces are balanced; if not, it reports Invalid CSS: unmatched braces. That sounds narrow, but an unbalanced brace is the number-one cause of a stylesheet that mysteriously stops working: the browser parser cannot tell where one rule ends and the next begins, so it swallows everything until it finds a brace that lets it recover. The check runs in your browser and your CSS is never uploaded.
This input is missing a closing brace on the first rule:
.card {
color: #4f46e5;
.button {
padding: 12px 20px;
}There are two { but only one }, so the validator reports Invalid CSS: unmatched braces. Add the missing } after #4f46e5; and it reports balanced. Switch the Operation dropdown to Beautify to re-indent and spot where the structure goes wrong.
| Not detected | Use instead |
|---|---|
Misspelled property (colr:) | Browser DevTools console, Stylelint |
Invalid value (width: 10) | DevTools "Invalid property value" warning |
| Unknown at-rule or bad selector | W3C CSS Validation Service |
| Missing semicolons within a rule | Beautify mode makes them visible |
A quick sanity pass before pasting generated or concatenated CSS into a project, checking a snippet from a blog or AI answer, or narrowing down why a stylesheet went blank after an edit.
It counts opening versus closing curly braces and reports whether they balance — a fast structural check, not a full conformance test.
No. Use browser DevTools, Stylelint, or the W3C CSS validator for that.
A missing closing brace merges the following rules into the broken one until the parser finds a brace to resync on, disabling many rules at once.
Yes. Choose Beautify CSS in the Operation menu to get one declaration per line; run Validate CSS first to find the missing brace.