CSS Validator
Validate CSS and see syntax errors, unknown properties and bad values with line and column — entirely on this device.
This is a syntax linter, not the W3C conformance service — it flags syntax errors and common mistakes.
Paste CSS to see problems as you type.
Press ? for shortcuts
Do it offline:$ npx csstree-validator styles.css
How to use it
- Paste your CSS or drop a .css file — a dropped file is read on your device, never uploaded, and very large input waits for an explicit run.
- Read the report: each problem shows its message, a caret frame and the exact line and column, top problem first.
- Select a problem's line and column to jump straight to it in your CSS, correct it, and watch the report refresh as you type.
- Copy the report, download it as a .txt file, or share the current CSS as a permalink.
Paste a stylesheet and this page checks it with css-tree, matching each declaration against the CSS grammar the specifications define, all inside a Web Worker on your device. Syntax errors, unknown properties and out-of-grammar values come back with a line and column you can jump to, as you type, with nothing uploaded. This is a syntax linter, not the W3C conformance service.
How it works
The engine is css-tree, loaded as its own chunk and run inside a Web Worker, so even a multi-megabyte sheet is checked without stalling the page. It is a parser library rather than a browser engine: what it can read, it matches against the value grammar drawn from the CSS specifications.
Findings come in two kinds. A genuine parse error — a missing colon or a stray brace — makes the sheet invalid, quoted verbatim from css-tree with its position. An unknown property, an unreadable at-rule condition or an out-of-grammar value is only a warning.
This is a linter, not the official W3C CSS Validation Service: it flags syntax errors and common mistakes fast, and never certifies a stylesheet.
Examples
.btn {
color red;
padding: 4px;
}Colon is expected at line 2, column 9.Line 2 has no colon, so css-tree stops at the space before red and points column 9 at it — a real parse error, so the verdict is invalid.
.card {
colr: #fff;
}Unknown property `colr`css-tree does not recognise colr — likely a typo of color — and reports it at line 2. The sheet stays valid: an unknown name is only a warning.
a{width:10zz}Mismatch
syntax: auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>
value: 10zz
--------^10zz is not a length, so the value fails the width grammar and css-tree prints the accepted syntax with a caret under the token. A warning: the rule parsed, the value did not.
.card {
display: flex;
gap: 12px;
color: #0af;
}
.card:hover {
color: #08f;
}No problems found — valid CSS.A clean stylesheet returns an empty report and a valid verdict. The :hover pseudo-class and shorthand hex colors are accepted as written.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
A linter, not the W3C validator
The W3C CSS Validation Service certifies a stylesheet against a chosen specification and can raise conformance points this page skips. Treat it as a fast first pass.
Some mistakes the parser quietly repairs
css-tree recovers from a few real problems without raising any parse error. A block left open at end of file parses cleanly, so a balance check catches the brace; an extra brace css-tree flags itself.
Where css-tree trails the browsers
A nested rule written without a leading & is valid in browsers but not in css-tree 3.2.1, so it is reported here as a syntax error. Grouped @supports and @media conditions it cannot read are downgraded to warnings.
SCSS and LESS are detected, not parsed
Paste SCSS or LESS and a notice says the input looks like a dialect, alongside errors on variables, mixins or // comments plain CSS lacks. Format dialect files with the CSS Formatter.
An unknown property may be perfectly fine
A custom property such as --brand is never flagged, and a known vendor prefix like -webkit-box-shadow passes cleanly. A newer-spec property surfaces only as a warning.
Invisible bytes are reported out loud
A leading byte-order mark is dropped with the note “Leading byte-order mark removed” before parsing, and an unpaired surrogate becomes the U+FFFD replacement character with a visible warning.
Common errors
Colon is expected at line 1, column 9.- A declaration needs a colon between the property and its value. With color and red run together, the parser reaches the value with none in sight and stops.
Unknown property `font-weigth`- font-weigth is a misspelling of font-weight, so css-tree does not know it and flags the declaration. The sheet stays valid, because an unrecognised name is only a warning.
Mismatch syntax: <color> value: redd --------^- redd is close to red but is not a color keyword, so it fails the <color> grammar. The report shows the accepted syntax and a caret under the token.
FAQ
Is this the same as the W3C CSS Validator?
No. This is a local syntax linter built on css-tree: it finds parse errors, unknown properties and grammar-breaking values, in your browser. The W3C service runs on the web and certifies a stylesheet against a chosen CSS profile.
Why does an unknown property come back as a warning, not an error?
Because a name css-tree does not recognise is not always wrong. It may be a custom property, a vendor prefix, or a property from a newer specification. Almost always it takes a genuine syntax fault, like a missing colon, to mark a stylesheet invalid — the exception is nesting written without a leading &, which browsers accept and this parser does not.
Can it validate SCSS or LESS files?
Not as dialects. It parses plain CSS, so SCSS or LESS constructs such as variables and mixins are reported as errors, with a notice that the input looks like a dialect. Use the CSS Formatter for those.
Keyboard shortcuts
- ⌘/Ctrl + Enter
- Re-validate the CSS now; required for very large input.
- ⌘/Ctrl + S
- Save the validation report as a .txt download.
- ⌘/Ctrl + C
- Copy the whole report when nothing is selected.
- ⌘/Ctrl + Shift + C
- Force-copy the report even mid-selection.
- t
- Toggle dark mode (skipped while you type).
- ? or ⌘/Ctrl + /
- List these keyboard shortcuts in a dialog.
- Esc
- Close the help dialog without touching your CSS.