CSS Custom Property Extractor

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 0 usage 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 :root blocks by hand.
• Refactor safety checks. Before renaming or removing a variable, see exactly how many places reference it.

How to use it

1. Paste your CSS or SCSS into the input box, or drop a .css/.scss file onto the uploader.
2. The table updates automatically as you type — no button to click.
3. 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.