WebToolsPlanet
CSS Tools

CSS Validator

Paste CSS and instantly check it for syntax errors. Detects unclosed braces, invalid declarations, and unsupported property/value pairs — with line numbers for each issue.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Validator?

CSS errors are silent by default — browsers skip invalid rules without throwing an error, so bad CSS simply has no effect instead of breaking the page. This makes it easy for invalid declarations to sneak into production unnoticed.

This validator checks your CSS for structural errors (unclosed braces, mismatched brackets) and declaration issues (missing colons, empty values). It also uses the browser's CSS.supports() API to detect property/value combinations the browser does not recognise as valid — catching typos and unsupported shorthand values. Results are shown as errors (structural) or warnings (potentially invalid declarations) with line numbers.

How to Use CSS Validator

1

Paste CSS into the input area or click "Valid Sample" or "Invalid Sample"

2

The validator runs instantly

3

Errors (red) indicate structural problems like unclosed braces

4

Warnings (yellow) indicate suspicious declarations

5

Fix issues and re-validate until clean

Common Use Cases

  • Front-end developers catching CSS syntax errors before committing to version control.
  • Teams running CSS validation as part of a code review checklist.
  • Developers debugging why a CSS rule has no visible effect on the page.
  • Students learning CSS by checking whether their declarations are valid.
  • Design systems teams enforcing CSS quality across component libraries.
  • Web developers validating CSS extracted from third-party tools before use.

Example Input and Output

CSS with an unclosed brace and a missing semicolon is caught with exact line references.

CSS with errors
.card {
  background: white;
  border-radius: 8px
  padding: 16px;

.title {
  font-size: 24px;
  color: #333;
}
Validation result
✗ 1 error found
Line 6: Unclosed '{' — .card block was never closed

⚠ 1 warning
Line 4: Missing semicolon after border-radius declaration

Privacy

All validation runs in your browser. No data is uploaded to any server.

CSS.supports() browser dependency

Property/value warnings are based on what the current browser supports, not the CSS specification. A declaration flagged as a warning in one browser may be valid in another. Treat warnings as hints to double-check, not definitive errors.

Frequently Asked Questions

Why does the validator show warnings for valid CSS?

CSS.supports() checks whether the current browser recognises a property/value pair. Vendor-prefixed properties (-webkit-, -moz-), very new CSS features, or custom properties (--var) may appear as warnings in older browsers but be perfectly valid CSS. Review warnings in context.

Does this validate CSS against the full W3C specification?

No — this tool performs structural and browser-support validation. For full W3C specification conformance checking, use the W3C CSS Validator at jigsaw.w3.org. This tool is designed for quick syntax checks during development.

Why do custom properties (CSS variables) show as warnings?

Custom properties like --primary-color are valid CSS, but CSS.supports() may not recognise them as property/value pairs. The validator skips CSS.supports() checks for properties starting with -- to avoid false positives.

Is my CSS sent to a server?

No. All validation runs in your browser. Your CSS never leaves your device.

Related Tools