Online Tool Store
CSS Variable Extractor
Paste any CSS and extract every custom property across all selectors, with redefinitions flagged, unused and undefined variables caught, and export as a clean :root block, JSON token map, or var() list. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Browser tool
CSS Variable Extractor
How it works
- Start with the sample already loaded, or paste your own CSS.
- Review the summary — every variable found, any redefined with conflicting values, and any unused or undefined ones.
- Check the full table for each variable's selector, value, and inferred type (color, length, font, and so on).
- Pick an export format — a clean :root block, JSON, or a var() list — then copy or download it.
FAQ
Does this run in my browser?
Yes. Your CSS is parsed locally in the page — nothing is uploaded, and there's no account.
What counts as a redefined variable?
A custom property that's declared more than once with different values — most commonly a :root default plus an override under a dark-mode media query or a theme class. Each occurrence is shown with its selector and line number so you can see exactly where the values diverge, rather than silently keeping only the first one.
What does "unused" or "undefined" mean here?
Unused means a variable is declared with -- but never referenced anywhere via var(). Undefined means the reverse — something calls var(--name) but --name is never declared in the pasted CSS. Both are common leftovers after a refactor, and undefined references are the ones actually worth fixing, since the browser silently falls back to the property's initial value.
Does it handle CSS inside @media or other nested blocks?
Yes. A :root block nested inside @media (prefers-color-scheme: dark) or a similar at-rule is still correctly attributed to :root, not to the @media wrapper.
Can I use the sample data?
Yes. The widget loads with a sample that intentionally includes a dark-mode redefinition, an unused variable, and an undefined reference, so you can see all three checks working before pasting your own CSS.
What export formats are available?
A clean :root {} block, a flat JSON token map, or a plain list of var(--name) references — copy or download whichever matches what you're pasting the result into.
What format should I paste my CSS in?
Paste your CSS custom properties one declaration per line, the same way they'd appear inside a :root block, for example `--brand: #0f766e;`. Each line becomes one row in the extracted list.
Is there a limit to how much CSS I can paste?
No hard limit — everything runs locally in your browser, so extraction speed depends only on your own device, not a server.
How we compare
| Feature | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Finds variables under any selector, not just :root | ✓ | ✓ | Only :root is checked |
| Flags redefinitions with conflicting values, showing every occurrence | ✓ | Not shown | Silently keeps only the first — verified missing an override |
| Flags unused variables and undefined var() references | ✓ | Not shown | Not shown, despite claiming to audit usage |
| :root inside @media resolved to the real selector | ✓ | Not applicable — single :root output | Not shown |
| Export as :root block, JSON, or var() list | ✓ | ✓ | Plain list only |
Every real CSS file worth auditing has a dark-mode override or a leftover unused token — that's exactly the case a same-name-only extractor gets wrong, and where this one is checked against it directly.