CSS Variable Extractor

Paste CSS and instantly see all custom properties (--variables), their values, and selectors.

Total Variables: 13Color Swatches: 3Matching Filter: 13

CSS input

Paste CSS containing custom properties (e.g. --my-var: value;)

Extracted variables (13 of 13)

--color-primary:root

#3b82f6

--color-secondary:root

#6366f1

--color-accent:root

oklch(70% 0.2 250)

--font-size-base:root

1rem

--font-size-lg:root

1.125rem

--spacing-sm:root

0.5rem

--spacing-md:root

1rem

--spacing-lg:root

2rem

--border-radius:root

0.375rem

--shadow:root

0 1px 3px rgba(0,0,0,0.12)

--btn-bg.button

var(--color-primary)

--btn-color.button

white

--btn-padding.button

var(--spacing-sm) var(--spacing-md)

Extract CSS custom properties from any stylesheet

CSS custom properties (also called CSS variables) are declared with a -- prefix and referenced using var(--name). They are scoped to the selector they are declared in — most design systems declare them on :root for global access. This tool extracts all declarations, identifies color values with a preview swatch, and lets you filter and copy individual properties or the full list. For related tools, see CSS Minifier and Color Converter.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Listing every custom property a stylesheet defines and where.
Auditing a theme for variables that are declared but never used.
Finding which selector sets a variable you are trying to override.
Producing a token inventory from an inherited stylesheet.
Comparing two stylesheets' variable sets.

Frequently Asked Questions

What does extracting variables from a stylesheet achieve?: It surfaces the values that are actually repeated, which is the evidence for what your design tokens should be. Guessing the token set first and refactoring toward it usually invents categories the codebase does not use and misses the ones it does.
Which values are worth turning into variables?: Anything repeated across unrelated rules — colours first, then spacing, radii, shadows and font sizes. A value used once is not a token; promoting it adds indirection with no payoff. The count is the signal, which is what makes extraction more useful than intuition.
How do custom properties differ from Sass variables?: They exist at runtime and follow the cascade, so they can be overridden per selector, per media query or from JavaScript. A Sass variable is substituted at compile time and is gone — which is why theming is possible with one and requires two stylesheets with the other.
Why do custom properties need a fallback?: Because `var(--missing)` with no fallback makes the whole declaration invalid at computed-value time, which is worse than being ignored — the property inherits or resets rather than falling back to the previous rule. `var(--brand, #333)` prevents a typo from silently unstyling an element.
Are custom property names case-sensitive?: Yes, unlike almost everything else in CSS. `--mainColor` and `--maincolor` are two different properties, and mixing conventions produces bugs that are invisible in review. Picking kebab-case throughout is the usual defence.

Common errors and gotchas

Assuming a declared variable is used, which extraction cannot tell you.
Missing variables set from JavaScript at runtime, which are not in the stylesheet.
Overlooking that a variable declared in a media query is undefined outside it.
Reading the first declaration as the effective one, when cascade order decides.
Extracting from source rather than the served CSS, which a build may have transformed.