CSS Validator
Check CSS for structural and syntax mistakes — unbalanced braces and parentheses, unterminated strings and comments, empty rule blocks, and properties or values missing their other half. Does not validate CSS property-value grammar.
Input
Output
| Line | Type | Message |
|---|---|---|
| No data yet | ||
Guides
What does this CSS validator check?
Paste CSS and get a line-by-line report of structural and syntax problems — the class of mistake that breaks parsing, not the class that produces the wrong color. Specifically, it checks for:
- Unbalanced braces (
{/}) — a rule block opened but never closed, or a stray closing brace with no matching opener. - Unbalanced parentheses inside values, such as a
calc(100% - 10pxmissing its closing). - Unterminated string literals — an opening
'or"with no matching close before the line ends or the file ends. CSS strings can't span multiple lines unless the line break is backslash-escaped. - Unterminated
/* comment */blocks — a comment opener with no closing*/. - Empty rule blocks (
selector {}) — flagged as a warning, since they're technically valid CSS but almost always leftover or dead code. - A property with no value (
color: ;) or a value with no property (: red;).
Each finding lists the line number, whether it's an error or a warning, and a plain-language message. If none of the above are found, you get a single "Valid CSS — no structural issues found" result.
What it does NOT check
This is a lightweight structural scanner, not a full CSS parser. It does not validate CSS's actual value grammar — it won't catch color: notacolor;, an invalid unit, a misspelled property name, or an unsupported value for a given property, because that requires knowing the complete, ever-growing CSS3 specification for every property. For that level of validation, use your browser's DevTools (the Styles panel greys out and flags properties/values it doesn't recognize) or a dedicated linter like Stylelint.
Who is it for?
- Developers hunting down a missing
}or)that's silently breaking the rest of a stylesheet. - Anyone pasting CSS from an unfamiliar source (a snippet, an AI generation, a copy-paste from docs) who wants a quick sanity check before using it.
- Code reviewers scanning for empty, likely-accidental rule blocks.
How to use it
- Paste your CSS into the input box — results update live as you type.
- Read the Line/Type/Message table: errors are structural breaks worth fixing immediately; warnings (like empty rule blocks) are worth a look but won't break rendering.
- Copy or download the results as CSV if you need to share them.
FAQ
Will it catch a typo like bakground-color?
No — unknown property names are a semantic check, not a structural one. The browser will simply ignore a property it doesn't recognize; this tool only tells you when the CSS itself can't be parsed correctly.
Why does it flag an empty rule block as a warning instead of an error?
selector {} is valid CSS — browsers parse it fine — but it does nothing, so it's almost always a mistake (a forgotten declaration, or dead code left behind after edits).
Does it support nested CSS or @media blocks?
Yes — brace/paren/string/comment tracking works at any nesting depth, so @media, @supports, and nested selector blocks are all checked the same way.
Privacy
Validation happens entirely in your browser. Your CSS is never uploaded or sent anywhere.