CSS Variable Extractor
Paste a stylesheet and pull out every --custom-property, grouped by prefix,
with duplicate definitions flagged.
Scans every selector block, not just :root. Same name, different value across selectors gets flagged as a duplicate.
Grouped variables will appear here.
How it works
The input is scanned rule block by rule block (matching selector { ... }
pairs, including nested ones like media queries), and every --name: value;
declaration inside each block is recorded along with the selector it belongs to. Variables
are grouped by prefix, the first hyphen-delimited segment after the leading
--, so --color-primary-500 and --color-accent both
land under "color", which mirrors how most design-token naming conventions are structured.
A name is flagged as a duplicate only when it's declared with genuinely different values
somewhere else, not just declared again under a different selector with the same value
(that's the normal pattern for theme overrides).
Everything runs on keystroke in this page's JavaScript, using a lightweight brace-matching scanner rather than a full CSS parser. Nothing you paste is uploaded.
Common questions
Which custom properties does it find?
Any declaration of the form --name: value; inside any selector block, not just :root, including nested rules and media queries. Each occurrence records which selector it was declared under.
How does duplicate detection work?
If the same variable name is declared more than once with different values (a common sign of copy-pasted or inconsistent tokens), it's flagged. Declaring the same name with the same value in multiple scopes (like light/dark theme overrides) is normal and isn't flagged.
Is my CSS sent anywhere?
No, parsing happens entirely in your browser with a small JavaScript scanner. Nothing you paste is uploaded.