Free CSS Validator
Paste your CSS, or give it a page URL and we find every stylesheet that page loads. Each one is validated separately, so the line numbers still match the file they came from.
Need it readable or smaller? The CSS Formatter beautifies or minifies a stylesheet, and the minified file is checked to render the same.
Syntax Checking
Catch syntax errors, missing semicolons, unclosed brackets, and malformed declarations instantly.
Property Validation
Verify that CSS properties and values are valid according to the latest CSS specification.
Quality Score
Get a 0-100 score and letter grade for your CSS quality. Track improvements as you fix issues.
Common CSS Errors
Missing Semicolons
Forgetting a semicolon at the end of a declaration causes the next property to be ignored or misinterpreted.
Invalid Property Names
Typos in property names like 'colr' instead of 'color' are silently ignored by browsers, making bugs hard to find.
Invalid Values
Using incorrect values like 'display: flexbox' instead of 'display: flex' won't produce errors in the browser, just broken layouts.
Unclosed Brackets
Missing closing braces cause all subsequent rules to be nested inside the wrong selector.
Missing Units
Numeric values (except 0) require units. 'width: 100' won't work, use 'width: 100px' or 'width: 100%'.
Invalid Selectors
Malformed selectors like '.class.' or '#id#id' are silently discarded by the browser.
Why Validate Your CSS?
Unlike HTML, CSS fails silently. Invalid properties and values are simply ignored by browsers without any error messages. This makes CSS bugs particularly hard to track down. A typo in a property name can cause hours of debugging.
Validating your CSS catches these silent failures before they reach production. It helps you identify typos, deprecated properties, browser compatibility issues, and syntax errors that could break your layout.
Clean, valid CSS also improves page performance. Invalid declarations force browsers to do extra parsing work, and redundant or conflicting rules increase file size without benefit.
Modern CSS That Validates Here
A CSS checker is only useful if it accepts the CSS you actually write. Each of these passes with zero errors, and the list is part of the test suite that runs before every release:
- Native nesting
.card { &:hover { color: blue } } - Container queries
@container (min-width: 400px) { } - :has() and :is()
.card:has(> img):is(.a, .b) { } - Cascade layers
@layer base, components; - Modern colour
color-mix(in oklch, red 40%, blue) - @scope and @starting-style
@scope (.card) to (.content) { } - @property
@property --x { syntax: "<color>"; } - Vendor prefixes
-webkit-line-clamp: 3;
Vendor-prefixed properties and values are not reported at all: no specification defines them, so a validator has nothing to check them against, and calling them errors would bury real problems.
CSS Errors It Catches
| You wrote | What is wrong |
|---|---|
| colr: red; | Unknown property: a typo the browser silently ignores. |
| display: flexbox; | Invalid value: the keyword is flex. |
| font-size: 16xp; | Invalid unit, so the whole declaration is dropped. |
| @medai screen { } | Unknown at-rule: nothing inside it ever applies. |
| .a { color: red; | A block never closed. Browsers close it at the end of the file, but CSS concatenated after it would be swallowed. |
| transform-origin: top start; | start is not a transform-origin keyword. Found in Bootstrap 6.0 alpha's own CSS in October 2026. |
One known gap, stated rather than hidden: a malformed calc(2rem + ) is not reported, because the parsers behind this validator follow the same error recovery as browsers and drop the declaration without raising it.
Validating, Linting and the W3C CSS Validator
Validation asks whether the CSS follows the specifications: known properties, legal values, well-formed rules. Linting, with a tool like Stylelint, enforces your team's conventions on top of valid CSS: ordering, naming, forbidden patterns. You usually want both, and they answer different questions.
Like the W3C CSS Validator, this one accepts a page URL as well as pasted CSS. It then reads every <style> block and linked stylesheet separately, so each error's line number is the line in its own file, and it says how many stylesheets it read and which, so a clean result over half a page never passes for a clean page. When it finds a mistake, the CSS error guides explain the fix, from a missing semicolon to an invalid property value.