Paste some code on the left — it validates as you type.
CSS Validator
Modern CSS validation with exact lines and suggestions.
About the CSS Validator
What is a CSS validator?
A CSS validator parses your stylesheet the way a browser does and reports everything that won't work: syntax errors like a doubled colon or missing semicolon, property names that don't exist, and values that don't match the property's grammar. Each finding comes with the exact line and column, a code frame pointing at the spot, and — for typos like colr — a "did you mean color?" suggestion.
What sets this checker apart is that it actually knows today's CSS. Many online validators run engines frozen years ago, so they mark perfectly valid modern code as broken. This one is built on a current CSS parser with up-to-date syntax data: nesting with &, @container queries, :has(), oklch() colors, and cascade layers all validate cleanly. It's also honest about what can't be checked statically — values using var() depend on runtime custom properties, so they're skipped rather than guessed at. Everything runs in your browser; nothing is uploaded.
How to Use This Tool
- Add your CSS. Paste it into the left editor, click Open file, or try the Valid and Broken samples.
- Read the badge. Green means clean; the counts split hard syntax errors from property and value warnings.
- Click any result. The editor jumps to the exact line and column of the problem.
- Fix and watch. Validation re-runs live, and the parser recovers after an error, so multiple mistakes are reported in one pass.
Common Use Cases
- Hunting the typo that breaks a page: One misspelled property fails silently in the browser — here it's flagged with a suggestion.
- Reviewing legacy stylesheets: Surface invalid values and dead properties accumulated over years of edits.
- Checking hand-written CSS before deploying: Catch mistakes on sites that don't run a build pipeline or linter.
- Verifying pasted snippets: Make sure CSS copied from articles or answers is actually valid before it lands in your codebase.
Once it's clean, the CSS Formatter beautifies it, the CSS Minifier compresses it for production, and the CSS Compare tool diffs two stylesheets. Or browse all our free developer tools.
Frequently Asked Questions
Does it support modern CSS like nesting and container queries?
Yes — that's the point of this rebuild. Nesting with &, @container and @layer rules, :has() and :is() selectors, and modern color functions like oklch() all parse and validate correctly, where older validators report false errors.
What's the difference between errors and warnings?
Errors are syntax problems — the parser could not read that part of the stylesheet, and browsers will discard the affected declaration or block. Warnings are readable-but-wrong: unknown property names and values that don't match the property's grammar. Browsers silently ignore those, which is exactly why they're worth finding.
Why are var() values not checked?
Because their correctness depends on what the custom property holds at runtime, which a static validator cannot know. Rather than guess and produce false alarms, declarations containing var() or env() are checked for syntax only. Custom property definitions themselves (--name: ...) accept almost any value by design.
Can it check SCSS or LESS?
No — preprocessor syntax like $variables, mixins, and @if isn't valid CSS, so it will be reported as errors. Validate the compiled CSS output instead; that's also what actually ships to browsers.
Why is a vendor-prefixed property only a warning?
Prefixed properties like -webkit-line-clamp sit outside the standard syntax data, but many are still needed in the wild. The validator marks them so you can review, without treating a deliberate prefix as a mistake.
Is my code uploaded anywhere?
No. Parsing and validation run entirely in your browser with a locally served parser — no CDN, no server round trips, no logging. It even works offline once the page has loaded.