Does this send my stylesheet anywhere?

No. Extraction runs entirely in your browser using a regex-based scan for --name: value; declarations.

Does it only look inside :root?

No. It scans the entire stylesheet for --name: value; declarations wherever they appear, whether inside :root, a component selector, or a media query, since custom properties can be declared in any rule.

What happens if the same variable is declared twice with different values?

Both declarations are counted, the first value found is kept in the output block, and the variable name is listed as a conflict in the summary so you know to check it.

Does it resolve var() references to their computed values?

No. It only extracts the declarations themselves (--name: value;); it doesn't evaluate var(--name) usages elsewhere in the stylesheet or track fallback values.

CSS Variable Extractor - Extract CSS Custom Properties Online

Overview

Introduction

A large stylesheet accumulates custom properties across many rules, and it's easy to lose track of which ones exist, or to accidentally redeclare one with a different value somewhere else.

This tool scans CSS for every custom property declaration and re-emits a clean, deduplicated list, entirely in your browser.

What Is CSS Variable Extractor?

A regex-based scanner that finds every --name: value; declaration in the input, regardless of which selector block it's inside.

It deduplicates by name, keeping the first value seen, and flags any name that was declared more than once with different values.

How CSS Variable Extractor Works

The input is scanned globally for the custom-property declaration pattern; each match's name and trimmed value are recorded in order of first appearance.

If a name reappears with a different value than its first occurrence, it's added to a conflicts list, and the summary line reports the total unique count, the total declaration count, and any conflicting names.

When To Use CSS Variable Extractor

Use it to get a quick inventory of a stylesheet's design tokens (colors, spacing, fonts) declared as custom properties.

It's also useful for catching accidental redeclarations of the same variable with a different value across a large CSS file.

Often used alongside CSS to Tailwind Converter, CSS Formatter and CSS Validator.

Features

Advantages

Runs entirely client-side.
Finds custom properties anywhere in the stylesheet, not just inside :root.
Flags conflicting redeclarations instead of silently keeping only the last one.

Limitations

It extracts declarations only; it doesn't resolve var(--name) usages elsewhere in the stylesheet or track fallback values passed to var().
Values are captured as raw text up to the next semicolon; a value containing a semicolon inside a string or url() could be split incorrectly.

Examples

Variables declared in :root and a conflicting redeclaration

Input

:root {
  --primary: #3366ff;
  --spacing: 1rem;
}
.card {
  --spacing: 1.5rem;
}

Output

:root {
  --primary: #3366ff;
  --spacing: 1rem;
}

/* Found 2 unique custom properties (3 declarations total). 1 duplicate declaration found. Conflicting values for: --spacing. */

--spacing is declared twice with different values, so it's kept at its first value and flagged as a conflict in the summary.

Best Practices & Notes

Best Practices

Check the conflicts list before assuming a variable has one consistent value across the whole stylesheet.
Run this after concatenating multiple CSS files if you're auditing a design system's full token set.
Pair with the CSS Formatter first if the source is minified, so the extracted list is easier to spot-check against the original.

Developer Notes

Uses a single global regex pass over the raw input text; declaration order of first appearance is preserved in the output block.

CSS Variable Extractor Use Cases

Auditing a stylesheet's design tokens declared as CSS custom properties
Finding accidental duplicate/conflicting variable declarations across a large CSS file
Generating a starting :root block for a new stylesheet from an existing one's variables

Common Mistakes

Assuming the output reflects the effective computed value; scoped redeclarations (like the .card example) override :root at runtime even though this tool reports the first-seen value.
Expecting var() usages to be resolved into their values; only the --name: value; declarations themselves are extracted.

Tips

If the conflicts list flags a variable, search the original stylesheet for that name to see which selector's value actually wins at runtime.
Use the output :root block as a quick reference while refactoring a component's hardcoded values into custom properties.

CSS Variable Extractor