CSS Validator
Paste a stylesheet to find syntax errors, unknown properties, invalid values, broken selectors and media queries, each with its line and column. Then let the validator fix the structural mistakes and reformat the CSS for you.
Last updated:
Tip: press Ctrl + Enter to validate and click an issue to jump to its line. Your stylesheet is checked locally and never uploaded.
How to use the CSS Validator
- Paste your CSS into the input, open a .css file, or load the sample with errors.
- Read the issues list: errors (red) break or invalidate CSS, warnings (amber) point to likely mistakes. With Validate as I type on, the list updates while you edit.
- Click an issue to jump to the exact line and column in the editor.
- Press Fix & format to get a corrected, consistently indented copy: missing semicolons and closing braces are added and stray braces removed.
- Copy or download the fixed CSS, and fix remaining value or property errors by hand.
What happens to invalid CSS in the browser
CSS is designed to fail softly: browsers skip what they don't understand and keep going. That makes mistakes easy to miss, because the page still renders, just not as intended. The error-handling rules from the CSS Syntax specification explain what each problem costs you:
| Problem | What the browser drops |
|---|---|
| Unknown property or invalid value | Only that declaration; earlier declarations of the same property still apply. |
| Missing semicolon | The declaration and the next one, which become a single invalid value. |
Invalid selector in a list (a, b:hoverr) | The entire rule, including the valid selectors. |
| Missing closing brace | Following rules are read as nested inside the open block, which usually breaks them. |
| Unclosed string | The rest of the line becomes a bad string; the declaration is dropped. |
@import after other rules | The whole @import. |
| Invalid media query | Treated as not all: the block never applies. |
Fixing the most common CSS errors
- Unknown property: usually a typo (
colr,backround,font-wieght); the validator suggests the closest real property. Some properties need a vendor prefix in older browsers. - Invalid value: check units (
16pxx, a number without a unit such aswidth: 10), hex colors (3, 4, 6 or 8 hex digits) and the order of shorthand parts. The "Expected" line shows the formal syntax. - Missing semicolon: every declaration except the last one in a block must end with
;. Adding it to the last one too is good practice. - Invalid pseudo-class:
:hoverr,::beforor a single colon where two are required for newer pseudo-elements such as::placeholder. - Media query syntax: write
and (max-width: 600px)with a space afterandand a colon inside the parentheses.
Once the stylesheet is valid, compress it for production with the CSS Minifier, or check selector weights with the CSS Specificity Calculator.
Frequently asked questions
How is this different from the W3C CSS Validator?
Both report syntax errors and invalid properties or values. This validator runs entirely in your browser (nothing is uploaded), updates as you type, highlights lines in the editor, suggests the property you probably meant, understands modern CSS such as nesting, container queries and :has(), and can fix structural mistakes automatically.
How are property values validated?
Each value is checked twice: against the CSS specification syntax database used by the css-tree library (based on MDN data), and with your browser's own CSS.supports() engine. A value is accepted when either says it is valid, so new features your browser supports are not flagged.
Why are values with var() not checked?
A value that uses var(), env() or attr() is only known when the page is rendered, so neither a validator nor the browser can check it in advance. The property name is still checked.
What does the auto-fix change?
It adds missing semicolons between declarations, closes unclosed blocks, strings, comments and brackets, removes stray closing braces and then reformats the stylesheet with consistent indentation. It does not guess replacements for unknown properties or invalid values; those stay listed as errors for you to decide.
Why is a valid selector reported as an error?
Selectors are checked with your browser's selector engine. A vendor-specific pseudo-element of another browser (for example ::-moz-selection in Chrome) is reported as a warning. If one selector in a comma-separated list is invalid, browsers drop the whole rule, which is why this matters.
Does it support SCSS, Less or Tailwind directives?
No, it validates plain CSS as browsers read it. Preprocessor syntax such as $variables, @mixin or @tailwind is reported, because it has to be compiled to CSS first.
What counts as an error and what as a warning?
Errors make browsers ignore part of your CSS: invalid syntax, unknown properties, invalid values, invalid selectors and misplaced @import. Warnings are valid CSS that is probably a mistake or has no effect: duplicate declarations, empty rules, unknown vendor-prefixed properties, old hacks and media types that never match.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.