CSS Validator

What Is a CSS Validator?

A CSS validator parses your stylesheet and reports syntax errors with exact line and column locations. It catches missing semicolons, unclosed braces, invalid property syntax, malformed selectors, and bad at-rule syntax — the kinds of mistakes that cause a browser to silently skip part of your stylesheet. Catching these early saves debugging time later when a page mysteriously renders wrong.

CSS Validator Online — What This Tool Does

This free CSS validator parses your CSS entirely in your browser using Prettier's CSS parser. If valid, you get a structural summary — rule count, declarations, at-rules. If invalid, you get the exact parse error with line and column number. No upload, no signup, no server-side processing.

How to Validate CSS Online

• Paste CSS into the Input pane, or click Upload to load a .css file.
• Click Validate — results appear in the right panel.
• If valid, see the stats summary: rule count, declarations, and at-rules.
• If invalid, the exact parse error with line/column is shown.
• Fix the source CSS in the input pane and re-validate.

What Does the Validator Check?

• Unclosed braces — every { needs a matching }.
• Missing semicolons — declarations must end with ; (technically the last one before } is optional but recommended).
• Invalid property syntax — values that don't match the property's expected format.
• Malformed selectors — bad combinators, invalid pseudo-class syntax.
• Bad at-rule syntax — wrong @media, @keyframes, @font-face, @import usage.
• Unmatched parentheses — common in calc(), var(), and linear-gradient().

What This Validator Doesn't Check

This tool validates syntactic correctness — whether the CSS parses. It does not check semantic issues like unknown property names (colorz: red parses fine but doesn't apply), browser compatibility, or accessibility. For those, use caniuse.com, stylelint, or a CSS coverage tool like Chrome DevTools' Coverage panel.

Common CSS Errors and How to Fix Them

• Unclosed brace — count { and }. The validator reports the line where the parser got confused, but the real error is usually earlier.
• Missing semicolon — most common in multi-line declarations. Add ; at the end of every property line.
• Unquoted url — modern parsers accept url(image.png) without quotes, but with special characters use url("image.png").
• Invalid colour — typos like #ZZZ or rgb(256, 0, 0) (max is 255) fail validation.
• Bad calc() syntax — operators in calc() require spaces: calc(100% - 20px) not calc(100%-20px).

Tips & Tricks

• Validate before committing — catches sloppy edits before they become production bugs.
• For larger projects, use stylelint — it catches semantic issues this validator misses (unknown properties, accessibility, project-specific rules).
• Pair with the CSS Formatter — format first to make errors easier to spot visually.
• Browser DevTools as a complementary check — Chrome highlights invalid CSS in the Styles panel with a strikethrough.

Related Tools

• CSS Formatter — beautify and format CSS stylesheets.
• CSS Minifier — compress CSS for production.
• SCSS Formatter — format SCSS files with Prettier.
• HTML Validator — validate HTML markup.
• JSON Validator — validate JSON syntax.

Is My Code Sent to a Server?

No. CSS validation runs entirely in your browser using Prettier's CSS parser. Your CSS — including any proprietary design tokens — never leaves your machine. There is no upload, log, or analytics on the CSS you validate.