CSS Custom Property Extractor
Extract every CSS custom property (--variable) declared in a stylesheet, with its declared value and how many times it's referenced via var() — useful for design-system audits and spotting dead variables.
Input
Output
| Property Name | Declared Value | Usage Count |
|---|---|---|
| No data yet | ||
Guides
What are CSS custom properties?
CSS custom properties — commonly called CSS variables — are values declared with a -- prefix (--primary-color: #464aff;) and consumed elsewhere with var(--primary-color). They power design tokens for color palettes, spacing scales, typography and theming (including prefers-color-scheme dark-mode overrides), letting a single declaration update every place it's referenced.
That flexibility comes at a cost: as a stylesheet grows, it gets hard to answer simple questions just by reading the source — which variables actually exist, what value did we settle on, and is anyone still using this one? This tool answers all three at a glance.
What this tool does
Paste (or upload) a CSS or SCSS file and the tool scans it for:
- Declarations — every
--property-name: value;pair, in the order they first appear. - Usages — every
var(--property-name)reference, counted per property.
The result is a table of each custom property's name, its declared value, and how many times it's used via var() — plus a one-line summary of the totals. A property declared but never referenced (usage count of 0) is a strong hint that it's dead weight safe to remove.
Why extract and audit custom properties?
- Design-system audits. Confirm your token list matches your design spec, and catch one-off colors or spacing values that snuck in outside the token system.
- Dead-variable detection. A
0usage count flags variables nobody references anymore — useful before a cleanup pass or a CSS bundle-size push. - Onboarding and documentation. Generate a quick reference of every token a codebase defines, without hunting through
:rootblocks by hand. - Refactor safety checks. Before renaming or removing a variable, see exactly how many places reference it.
How to use it
- Paste your CSS or SCSS into the input box, or drop a
.css/.scssfile onto the uploader. - The table updates automatically as you type — no button to click.
- Copy or download the results as CSV for a design-system audit doc or a cleanup ticket.
FAQ
Does it understand SCSS $variables or nesting?
No — it only matches native CSS custom properties (the --name syntax). Sass variables ($name) and CSS preprocessor features aren't parsed, since they're compiled away before reaching the browser.
Does it track which selector a property was declared or used in?
No — this is a flat, stylesheet-wide scan. A property redeclared in a @media block for dark mode is still one row (its last declared value wins), and a usage inside any rule counts toward that property's total.
Does a fallback value count, like var(--gap, 8px)?
Yes — a fallback argument doesn't stop a usage from counting as a reference to --gap.
Privacy
Everything runs locally in your browser. Your CSS is never uploaded or stored anywhere.