CSS Custom Property Extractor

The CSS Custom Property Extractor scans a pasted stylesheet and pulls out every --custom-property in use, organized into a clean reference list — every design token, color variable, spacing value, and other custom property defined or referenced across the file, without manually scrolling through hundreds or thousands of lines hunting for var(--...)usage.

CSS custom properties (CSS variables) are how most modern design systems define their tokens — colors, spacing scale, font sizes, breakpoints — as reusable values referenced throughout a stylesheet. That’s great for maintainability but creates a specific problem when you’re picking up an unfamiliar codebase, auditing a stylesheet for consistency, or documenting a design system after the fact: there’s often no single list of every custom property in use, just scattered :root definitions and var() references throughout potentially thousands of lines of CSS. Extracting a clean list by hand means manually searching and cross-referencing, which is slow and easy to miss entries in.

To use it, paste your CSS. The tool scans the full stylesheet and extracts every custom property — both where it’s defined (typically in :root or a similar scope) and where it’s referenced via var() throughout the rest of the file — into an organized reference list. Use that list to audit which tokens actually exist, spot custom properties that are defined but never used (or referenced but never defined, which usually indicates a bug), and document a design system’s tokens without hand-compiling them.

This is especially useful when inheriting a codebase without documentation, or auditing your own project’s design tokens for consistency after months of incremental changes by multiple contributors.

FAQ

Does this show where each custom property is defined, where it’s used, or both?

Both — a useful extraction includes each property’s definition location alongside everywhere it’s referenced via var(), which is what makes it useful for spotting unused definitions or undefined references, not just a flat list of names.

Can this catch custom properties that are referenced but never actually defined anywhere?

This is one of the more useful things a full extraction surfaces — a var(--something) reference with no matching --something definition anywhere in the scanned CSS usually indicates a typo or a missing definition, and having the full list side by side makes that mismatch visible.

Does this work across multiple CSS files, or just one at a time?

Check the specific tool’s input method — pasting a single stylesheet at a time is the most straightforward workflow; for a project split across multiple CSS files, you’d either concatenate them before pasting or run the extraction per file and combine the results yourself.

Is my CSS uploaded anywhere when I use this?

No — the scan and extraction run entirely in your browser against the CSS you paste in, so proprietary or unreleased design system code isn’t sent anywhere as part of using this tool.