Don't like ads? Go Ad-Free Today 

CSS Custom Property Extractor

DeveloperText

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

CSS Custom Property Extractor

Paste any CSS or SCSS stylesheet and instantly get a clean, sorted, deduplicated list of every --custom-property declared in it — along with the selector scope it was declared in. The extractor also surfaces variables that are referenced via var(--name) but never declared anywhere, which are a common cause of broken styles in large design systems.

How to Use

Paste your stylesheet into the CSS / SCSS Input box (or click Try an example to load a sample).
Pick an Output Format: a plain-text table, a JSON object, or a ready-to-paste :root { } block.
Use the Filter field to narrow the result by variable name, value, or scope.
Toggle Include selector scope to control whether the table shows where each variable was declared.
Review the Undefined Variables panel for any var(--name) references that have no matching declaration.
Copy or download the extracted list with the buttons on the output panel.

Features

Brace-aware parser – walks the stylesheet character by character so it correctly handles nested selectors, media queries, and quoted values.
Scope tracking – each variable is paired with the selector or at-rule it was declared in, so you can tell a :root token apart from a component-scoped override.
Three output formats – plain-text table for review, JSON for programmatic use, and a clean :root { } block you can paste back into a stylesheet.
Undefined variable detection – flags any var(--name) that has no matching declaration anywhere in the input.
Live filter – type to narrow the result by variable name, value, or selector scope in real time.
Dedupe and sort – duplicate declarations within the same scope are collapsed and the list is alphabetised for quick scanning.
Runs entirely in your browser – nothing is uploaded; works on private and unfinished stylesheets.

When to Use This Tool

Auditing a design-system stylesheet to build a master list of tokens.
Migrating SCSS variables to native CSS custom properties.
Tracking down a broken style caused by a misspelled var() reference.
Generating a starter :root { } block from a third-party theme.
Exporting tokens as JSON for use in a documentation site or Storybook entry.

 FAQ

What is a CSS custom property?

A CSS custom property (also called a CSS variable) is an author-defined identifier prefixed with two dashes (for example, --color-primary) whose value can be reused anywhere in the stylesheet through the var() function. Unlike preprocessor variables, custom properties are resolved at runtime by the browser, which means they cascade and inherit just like any other CSS property and can be updated dynamically with JavaScript.
How does selector scope affect a custom property?

A custom property exists only within the subtree of the element that declares it. Declaring it on :root makes it effectively global because :root matches the html element, while declaring it inside a component selector like .card limits its value to that component and its descendants. The same name can hold different values in different scopes, which is the mechanism behind theming, dark mode toggles, and component-level overrides.
Why does CSS not error when var() points to an undefined custom property?

The CSS Custom Properties specification requires the browser to fall back silently when a referenced variable has not been declared. If var() has no fallback argument, the entire property is treated as if it has the value unset, which often leaves an element with its initial or inherited style. Because no error is reported in the console, undeclared references are easy to miss, and surfacing them up front prevents subtle visual regressions.
Are SCSS variables and CSS custom properties the same thing?

They share a similar role but live at different stages of the pipeline. SCSS variables, written with a dollar sign such as $color-primary, are resolved when SCSS is compiled to CSS and disappear from the final output. CSS custom properties prefixed with two dashes survive compilation and are evaluated by the browser at render time, which is what enables runtime theming and JavaScript-driven updates.
Can a custom property be redeclared and what happens then?

Yes. When the same custom property is declared more than once for the same element, the normal CSS cascade decides which declaration wins, taking specificity, source order, and importance into account. Inside a single rule the last declaration overrides the earlier ones, which is the same conflict-resolution behaviour that applies to any other CSS property.