handyman
Hazuu Tools

CSS Validator

Validate your CSS syntax and catch errors with precise line and column numbers.

CSS Input
info

About CSS Validator

CSS Validator is a free online tool that parses your stylesheet using the css-tree library and reports every syntax error with its exact line and column number. A single missing semicolon or an unclosed brace can silently break an entire cascade of rules in some browsers while appearing fine in others — this tool surfaces those hidden problems before they reach production.

It is built for the moments where the browser developer tools are not enough: reviewing a third-party stylesheet you did not write, debugging a preprocessor output that looks correct at a glance, or doing a quick sanity-check on generated CSS before committing. Unlike a formatter or minifier, the validator does not change your code at all — it only reads it, parses the full AST, and tells you what is structurally wrong.

All parsing runs entirely in your browser using the css-tree library. Your stylesheet is never uploaded to a server, so proprietary design tokens, internal class-naming conventions, and unreleased brand styles stay on your machine. There are no usage limits, no accounts required, and no cost.

star

Key Features

check_circle

Precise error locations

Every error is reported with the exact line number and column offset so you can jump straight to the problem without scanning the file manually.

check_circle

AST-based parsing

Uses css-tree to build a full abstract syntax tree rather than line-by-line pattern matching, which catches structural issues that simple regex checks miss.

check_circle

Handles at-rules and media queries

Validates @media, @keyframes, @import, @supports, and other at-rule blocks, not just plain rule sets and declarations.

check_circle

File upload support

Drag and drop or upload a .css or .txt file directly — useful for checking a downloaded stylesheet without opening a code editor.

check_circle

100% client-side

Parsing happens locally in your browser. Nothing is transmitted to any server, making it safe for proprietary, internal, or unreleased stylesheets.

check_circle

Built-in sample fixtures

Load a known-valid or known-invalid CSS sample with one click to explore the tool output before testing your own code.

help

How to Use

01

Paste Your CSS

Copy your CSS stylesheet and paste it into the editor, or upload a .css file.

02

Validate

Click "Validate" to parse your CSS and check for syntax errors.

03

Fix Errors

Review the error list with line numbers and fix each issue in your source code.

code_blocks

Example

The validator catches a missing semicolon on line 2 and a missing colon on line 8, reporting exact positions for each error.

CSS with syntax errors
.container {
  max-width: 1200px
  margin: 0 auto;
}

.card {
  border-radius: 12px;
  background white;
}
Validation result
Invalid CSS — 2 errors found

Line 2, Col 17: Colon is expected
Line 8, Col 12: Colon is expected
lightbulb

Common Use Cases

  • arrow_circle_right

    Pre-commit stylesheet checks

    Run the validator on your CSS output before committing to catch typos introduced during editing — especially useful when multiple team members touch the same file.

  • arrow_circle_right

    Auditing third-party or generated CSS

    When you receive a stylesheet from a vendor, a design export tool, or a preprocessor you do not control, the validator confirms it is structurally sound before you include it in your project.

  • arrow_circle_right

    Debugging cross-browser rendering differences

    A declaration that is silently skipped by one browser often has a syntax error. The validator finds the offending line so you can determine whether the problem is a bug or a typo.

  • arrow_circle_right

    Learning CSS syntax

    Students and developers new to CSS can paste their experiments and get immediate feedback on syntax mistakes with exact locations, rather than inferring errors from visual side-effects.

  • arrow_circle_right

    Verifying minifier output before deployment

    After running a CSS minifier, paste the output here to confirm the minification did not introduce structural errors before it goes live. This is a distinct step from formatting or compressing — you are checking correctness, not style.

quiz

Frequently Asked Questions

What is a CSS Validator? expand_more
A CSS Validator parses your stylesheet and checks it for syntax errors according to CSS specifications. It catches missing semicolons, invalid property values, malformed selectors, and structural issues, reporting the exact location of each error.
What types of CSS errors does this catch? expand_more
The validator catches missing semicolons, missing colons between properties and values, unclosed braces, malformed selectors, invalid at-rules, and general structural syntax issues in your CSS.
Is my CSS code secure? expand_more
Yes. All validation runs entirely in your browser using the css-tree parser. Your CSS never leaves your machine and is not sent to any external server.
Does this validate against W3C standards? expand_more
The validator checks CSS syntax and structure. For full W3C compliance checking including property value validation against specific CSS levels, use this tool alongside the official W3C CSS Validator.
How is CSS Validator different from CSS Formatter? expand_more
The formatter rewrites your CSS with consistent indentation and spacing — it changes the text but never tells you whether the code is correct. The validator does the opposite: it never modifies your stylesheet, only reads it and reports syntax errors with line numbers. Use the validator first to confirm correctness, then the formatter to tidy presentation.
How is CSS Validator different from CSS Minifier? expand_more
The minifier compresses your stylesheet by removing whitespace and shortening values to reduce file size. The validator does not transform your code at all — it only checks whether the syntax is structurally valid. A stylesheet can be perfectly valid yet need minifying, or perfectly minified yet contain syntax errors; they solve different problems.
Can I validate a stylesheet that uses CSS variables or custom properties? expand_more
Yes. CSS custom properties such as --color-primary: #7c3bed are valid CSS syntax and are parsed without errors. The validator checks structural syntax, so well-formed custom property declarations pass cleanly.
Does the validator check @media and @keyframes blocks? expand_more
Yes. The css-tree parser handles all standard at-rules including @media, @keyframes, @supports, @import, and @font-face, and reports syntax errors inside those blocks with the correct line numbers.