0 chars · 0 lines
Paste CSS to validate
Errors, warnings and hints appear here — or enable Live validate// validate CSS and catch errors instantly
Validate CSS and catch syntax errors, unknown properties, and bad values instantly. Line-by-line error report with severity levels — browser-based, free, no sign-up.
Paste CSS to validate
Errors, warnings and hints appear here — or enable Live validateDrop in any CSS — from a stylesheet, a <style> block, browser DevTools, or a minified vendor file. Any amount of CSS is accepted.
Errors, warnings, and hints appear in the right panel grouped by severity. Each issue shows the line number, property name, and a description of the problem.
Click any issue in the report to highlight the corresponding line in the editor. The left gutter marks lines with colour-coded indicators.
CSS Validator parses your CSS and reports syntax errors, unknown properties, invalid values, and best-practice warnings. It uses a rule engine covering 200+ CSS properties and produces a colour-coded report with line numbers, severity levels, and one-click line jumping — all entirely in your browser.
The validator catches missing semicolons, unclosed braces, unknown property names, invalid or out-of-range values (such as negative opacity or a percentage where a length is required), empty rule blocks, duplicate properties within a block, and vendor-prefixed properties used without the standard equivalent.
An error means the CSS is syntactically invalid or will definitely be ignored by browsers. A warning means the CSS is technically valid but may cause unexpected behaviour or indicates a best-practice violation — such as using !important too frequently or defining a property that is overridden in the same block. Hints are informational notes about compatibility or redundancy.
Yes. CSS custom properties (--my-variable: value) and var() references are recognised as valid syntax and will not produce false-positive errors. The validator also recognises calc(), clamp(), min(), max(), and other CSS functions.
Yes. The validator handles all at-rules including @media, @keyframes, @supports, @layer, and @container. Properties and values inside nested blocks are validated with the same rules as top-level rules.
No. All validation logic runs entirely in your browser using JavaScript. Nothing is transmitted to any server, making this tool safe for proprietary or sensitive stylesheets.
When live validation is enabled, the validator re-runs automatically as you type — after a short debounce delay so it does not trigger on every keystroke. This gives you instant feedback while editing. You can disable it and click Validate manually if you prefer to validate on demand.
CSS errors are notoriously silent. A misspelled property name, a missing semicolon, or an invalid value does not produce a visible error in the browser — it simply gets ignored, leaving you wondering why a style is not applying. A CSS validator surfaces these invisible issues before they reach production, saving debugging time and preventing layout breakage in browsers that handle fallbacks differently.
CSS has two distinct failure modes: parse errors and unknown declarations. A parse error — such as an unclosed brace or a missing colon between a property and value — can cause the parser to skip entire rule blocks, silently breaking a large section of your stylesheet. An unknown declaration — a misspelled property name or an unrecognised value — is silently discarded by the browser without affecting anything else. Both types of error are invisible without a validator.
This validator categorises issues into three severity levels. Errors are definitive problems — syntax the browser cannot parse, property names that do not exist in the CSS specification, or values that are outside the allowed range for a property. Warnings are valid CSS that may produce unintended results or violates best practices — using !important in many places, defining duplicate properties in the same rule, or using shorthand properties after their longhand equivalents. Hints are informational notices about browser compatibility, redundant rules, or deprecated syntax that still works but should be migrated.
The editor pane shows a colour-coded gutter on the left side of each line. Lines with errors have a red dot, lines with warnings have an amber dot, and lines with hints have a blue dot. Clicking any issue in the report panel automatically scrolls the editor to the relevant line and highlights it, so you can see the problematic code in context without manually counting line numbers.
With live validation enabled, the validator runs automatically as you type, with a short debounce delay to avoid triggering on every keystroke. This is particularly useful when you are editing CSS directly in the tool or pasting from an external editor. The summary badges in the toolbar update in real time to show the current error and warning counts at a glance.
After validation, the results panel shows a statistics summary including the number of rule blocks, total properties declared, unique selectors, and any at-rules present. This gives you a quick structural overview of the stylesheet — useful when evaluating a third-party CSS file before adding it to a project or auditing an existing stylesheet for bloat.