CSS custom properties (--variable-name) make stylesheets easier to maintain, but they’re also easy to lose track of once a project grows — you end up with declared variables nobody uses, and var() references pointing at properties that were never defined. This tool scans a stylesheet and reports both.
What Is the CSS Variables Extractor?
Paste any CSS and get a full list of every --custom-property declaration and every var(--name) usage, cross-referenced to flag which declared variables are never used, and which used variables were never declared anywhere in the pasted CSS.
How to Use It
- Open the tool at /tools/css-variables-extractor.
- Paste your stylesheet (or a relevant section of it) into the textarea.
- Review the summary line for unused and undeclared variable counts.
- Check the detailed list to see exactly which variables need attention.
Key Features
- Declaration extraction for every
--name: value;pattern, wherever it appears in a rule. - Usage extraction for every
var(--name)orvar(--name, fallback)reference. - Cross-reference report flagging unused declarations and undeclared-but-used variables.
- Runs entirely client-side — your stylesheet is never uploaded anywhere.
When to Use This Tool
- Cleaning up a design token system before a refactor, to remove dead custom properties.
- Catching typos in
var(--name)calls that silently fall back toinitialor a default value. - Auditing a component library’s CSS to document which variables are part of its public API.
Try It Now
Open CSS Variables Extractor directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.