If you've ever pasted a perfectly valid stylesheet into an online CSS validator only to be bombarded with false positives about oklch(), dvh units, or custom properties, you'll know how frustrating outdated tooling can be. That problem just got a whole lot smaller.
The CSS Validator at CSS Portal has been completely rebuilt from the ground up with a brand new validation engine – one that actually understands CSS as it's written in 2026.
Why a New Engine?
The most widely used CSS validators on the web – including CSSLint – haven't kept pace with the language. CSSLint hasn't been meaningfully updated in years, and the W3C validator, while authoritative, often lags behind newer specifications. The result? Tools that flag modern, perfectly valid CSS as broken.
The new CSS Portal validator takes a different approach: it was designed from scratch to support contemporary CSS first, rather than treating newer features as edge cases.
What's New and Noteworthy
Modern CSS is a First-Class Citizen
The validator now fully recognises and correctly handles the CSS features that have become standard practice:
- Custom properties (
--my-variable) are tracked across declarations and usages - Modern colour functions including
oklch(),color-mix(), and the full range ofhsl()andrgb()syntaxes - Viewport units like
dvh,dvw,svh, andsvw– no more false errors on responsive layouts - At-rules including
@layer,@container,@supports, and@keyframesare all validated structurally and semantically color-schemeand other modern properties are recognised without issue
If your CSS is valid, the validator won't tell you otherwise.
Three Severity Levels – Not Just Pass/Fail
Every issue is classified into one of three clearly separated categories:
Errors are genuine problems that will prevent your CSS from working. Think unknown properties, invalid values, missing braces, malformed calc() expressions, and invalid selectors.
Warnings flag things that won't necessarily break your CSS today but are worth revisiting – obsolete vendor prefixes, deprecated properties, missing unprefixed counterparts, and undeclared variable usage.
Info notices are purely advisory. Your CSS is valid, but there's something worth knowing: an unnecessary unit on a zero value, use of !important, duplicate selectors, or unquoted font family names.
This tiered approach means you can focus your attention where it actually matters.
Intelligent Shorthand Validation
Shorthand properties like border, background, transition, font, and animation are notoriously difficult to validate because their values combine multiple types in flexible order. The new engine tokenises shorthand values carefully – treating CSS functions like linear-gradient() and rgb() as single units – before checking each token against the appropriate validators.
Crucially, animation names are treated as valid identifiers. So animation: fade 1s ease won't generate false positives just because fade is defined in a separate file.
Selector Validation That Actually Makes Sense
The validator checks selectors for real mistakes: invalid combinator characters, consecutive combinators, selectors beginning or ending with a combinator, and class or ID names that start with a number. Escaped characters are correctly recognised and allowed through without triggering false errors.
Structural Error Detection
Missing opening and closing braces are detected and reported with accurate line numbers. Importantly, parsing continues past structural errors where possible – a single missing brace won't suppress every subsequent error in the file.
Missing semicolons are also caught, including the subtle case where a missing semicolon causes the following property name to be parsed as part of the preceding value. The error message in that case is targeted and readable, not confusing.
Summary Statistics
Every validation run now produces a statistics panel alongside the issue list. You'll see the total number of rules and declarations, the five most-used properties, CSS variables declared and referenced, at-rules present, and a full breakdown of errors, warnings, and info notices.
It's a useful at-a-glance view of a stylesheet's overall health and complexity.
Try It
Head to cssportal.com/css-validator, paste in your stylesheet, and hit Validate Code. Results come back with exact line numbers so you can jump straight to any issue.
If you run into anything unexpected, please report it by contacting us – the engine is actively maintained and the team wants to hear about edge cases.
