CSS Validator
Find the CSS mistakes that ship: a missing colon, an unclosed rule, a value that is not there, a duplicate property, a prefix with no standard property.
# 1 problem, 4 notes
2:2 problem "background red" has no colon, so the browser will drop it.
4:2 note "border-radius" is set twice in the same rule; the last one wins.
7:1 note ".empty" is an empty rule.
9:1 note @medai is not an at-rule browsers know. Check the spelling, or it may be newer than this list.
14:1 note -webkit-backdrop-filter appears without the unprefixed backdrop-filter. Prefixed only is how a property stops working in the next browser version.
# A problem is something a browser will refuse or misread. A note is valid CSS worth a second look.
# This checks structure, not whether a property or value exists: a typo in a value is still valid syntax.Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Find the CSS mistakes that actually ship, each with a line, a column and a reason.
How to use
- Paste the stylesheet. Nothing is uploaded.
- Fix the problems first. A problem is something a browser will refuse or misread: a missing colon, an unclosed rule, a declaration with no value.
- Read the notes. They are valid CSS worth a second look: an empty rule, a property set twice, a vendor prefix with no standard property, a pile of
!important. - Turn notes off when you only want to know whether the file parses.
Example
# 2 problems, 3 notes
2:2 problem "background red" has no colon, so the browser will drop it.
4:2 note "border-radius" is set twice in the same rule; the last one wins.
7:1 note ".empty" is an empty rule.
9:1 note @medai is not an at-rule browsers know. Check the spelling.
15:2 note -webkit-backdrop-filter appears without the unprefixed backdrop-filter.The line and column point at the declaration or selector itself, not at the whitespace in front of it, so a jump-to-line lands where you expect.
Pitfalls
- A browser recovers from bad CSS by skipping the smallest thing it can. A missing colon loses one declaration; a missing brace can lose the rest of the file. That is why an unclosed rule is a problem and a duplicate property is only a note.
- This checks structure, not vocabulary.
colr: redandcolor: reddishare both valid syntax and neither will do anything; only a full property database can catch those. - A brace or a semicolon inside a string or a comment is content, not structure. The scanner reads strings, comments and
url()values as units, which is what a regular expression based checker gets wrong. - Vendor prefixes alone are how a feature stops working.
-webkit-backdrop-filterwithoutbackdrop-filterworks today and breaks the day the prefix is dropped. - Duplicate properties are sometimes deliberate: an old value followed by a new one is the oldest fallback pattern in CSS. The note is a prompt, not a fault.
- An empty rule is usually left over from a refactor. Occasionally it is a placeholder a build step fills in.
!importantis not an error and not free. Each one removes a tool you will want later; four in a rule usually means the selector is wrong.- Custom properties accept almost anything as a value, including text that means nothing.
--gap: bananas;is valid CSS.
Compatibility
The at-rule list covers everything browsers support today, including @layer, @container, @scope and @starting-style, so a genuinely new at-rule may be flagged as unknown until the list catches up; the message says so. The scanner handles nested rules, nested at-rules and CSS nesting. Everything runs in your browser with no upload.
Frequently asked questions
Is this the W3C validator?
No. The W3C service checks against the full grammar and every property definition. This looks for the structural mistakes that break a stylesheet in practice, in your browser, with no upload.
Why is my typo in a property name not reported?
Because it is valid syntax. A browser ignores a property it does not know, which is also how progressive enhancement works.
What counts as a problem rather than a note?
A problem is something the browser will refuse: no colon, no value, an unbalanced brace, an unterminated string or comment. Everything else is a note.
Does it understand CSS nesting?
Yes. Nested rules and nested at-rules are tracked by brace depth.
Can it fix the file?
No. It reports; the formatter and minifier next door change things.