0 chars
Paste CSS to extract variables
All --custom-property declarations will appear here// extract every --variable from your CSS
Paste any CSS and instantly extract every --custom-property declaration. Groups by scope, detects color swatches, shows usage count, and exports a clean token sheet.
Paste CSS to extract variables
All --custom-property declarations will appear hereDrop in any stylesheet — a full design token file, a component CSS, a framework's variables file, or minified CSS from a build tool.
Variables are grouped by scope, colour-typed variables get a swatch preview, and usage counts show how often each variable is referenced.
Copy as a clean CSS :root block, SCSS $variable map, JSON design token sheet, or TSV table for spreadsheets.
CSS Variables Extractor scans any CSS input and produces a structured list of every --custom-property declaration it finds. Variables are grouped by the selector they belong to, typed by value category (color, size, other), and annotated with usage counts showing how many times each variable is referenced via var().
CSS custom properties, also called CSS variables, are entities defined with a double-hyphen prefix like --primary-color: #3b82f6. They can be referenced anywhere in the stylesheet using var(--primary-color). Unlike preprocessor variables, they are live in the browser, can be changed at runtime, and cascade through the DOM like any other CSS property.
The scope of a CSS variable is the selector in which it is declared. Variables declared in :root are globally available to every element. Variables declared in a component selector like .card are only available inside that component. This tool groups extracted variables by their declaration scope so you can see which variables are global tokens and which are local overrides.
The usage count shows how many times the variable is referenced via var(--name) elsewhere in the same CSS input. A count of zero means the variable is declared but never used in the pasted CSS — it may still be used in other files. Variables with a zero usage count are flagged in the Unused filter tab for easy review.
The JSON export produces a flat object where each key is the variable name (without the double-hyphen prefix, with hyphens converted to camelCase) and the value is the CSS value string. This format is compatible with Style Dictionary and other design token tools. The raw variable names are also included as a comment field for reference.
Yes. The extractor scans the entire CSS input regardless of nesting level. Variables declared inside @media, @layer, @supports, and other at-rules are found and grouped under their containing selector with a note indicating the at-rule context.
A duplicate occurs when the same variable name is declared more than once in the same scope. This is common in stylesheets that override theme variables in a different context or at a lower scope. The tool flags duplicates with a badge so you can decide whether the override is intentional or a copy-paste error.
Design token workflows rely on CSS custom properties to maintain consistency across large codebases. When inheriting a project, auditing a third-party framework, or preparing a design system migration, you need a quick way to inventory every variable in a stylesheet. Manually reading through hundreds or thousands of lines of CSS to find all --variable declarations is not practical. This extractor does it instantly.
A CSS custom property declaration always starts with two hyphens: --property-name: value. The name can include letters, digits, hyphens, and underscores. The value can be any valid CSS value — a colour, a length, a string, a complex expression, or even another var() reference. Variables are most commonly declared in :root for global scope, but they can appear in any selector to create component-scoped tokens.
The extractor groups every variable by the selector it was declared in. Variables in :root form the global token group. Variables in component selectors like .button or .card form per-component groups. Variables inside @media queries or other at-rules are grouped by selector within the at-rule context. This structure lets you immediately see how a design system is organised and whether variables are being declared at the right scope level.
Any variable whose value resolves to a colour — a hex code, an rgb() or hsl() value, or a named CSS colour — is automatically identified as a colour token and displayed with a live colour swatch. The Colors filter tab isolates these tokens, making it easy to review a palette or verify that a colour scheme migration is complete.
Every variable in the extracted list shows how many times it appears in a var() reference within the same CSS input. Variables with a usage count of zero are potentially dead code — declared but never consumed in the files you pasted. These are surfaced in the Unused tab. Note that a zero count does not definitively mean the variable is unused in your project, as it may be consumed in HTML or JavaScript files not included in the input.
The tool exports extracted variables in four formats. The CSS :root export produces a ready-to-paste block that groups all global tokens under the root selector. The SCSS export converts variable names to $variable syntax for use in Sass projects. The JSON export produces a design token object compatible with Style Dictionary and Theo. The TSV table export is suitable for pasting into Google Sheets or Excel for documentation and review.