Paste raw CSS to list every custom property, spot redefinitions, count var() usages, and export a clean :root block or JSON.
/* Extract variables to see export code here */
Find every custom property in a large CSS file, catch accidental redefinitions, and see what's actually used.
CSS comments are stripped before parsing, so commented-out variables never pollute your results.
See exactly how many times each variable is declared and how many times it's referenced with var().
Copy a ready-to-paste :root block or a name-to-value JSON object for tooling and design systems.
CSS custom properties, commonly called CSS variables, let you declare a reusable value once with a name starting in two dashes, such as --primary-color: #6c5ce7;, and read it anywhere later with var(--primary-color). Unlike Sass or Less variables, custom properties are a real part of the CSS language: they participate in the cascade, can be redefined inside any selector or media query to create scoped overrides such as a dark-mode theme, and can even be read and written from JavaScript. That flexibility is also why large stylesheets tend to accumulate variable sprawl over time — the same token gets redefined slightly differently in several places, or a variable stops being used anywhere but nobody notices. Extracting every declaration and cross-referencing it against every var() reference, the way this tool does, is a fast way to audit a design system: variables declared more than once deserve a second look to confirm the redefinition is intentional, and variables with a usage count of zero are often safe to delete.
A variable redeclared inside a class or media query only overrides its value for elements matching that scope.
var(--gap, 16px) supplies 16px whenever --gap is undefined, which this tool still counts as a usage.
--Primary and --primary are two different custom properties in CSS, unlike most standard property names.
A CSS custom property, informally called a CSS variable, is a name that starts with two dashes, such as --primary-color, and is declared with a value. It is later read anywhere in the stylesheet using the var() function.
It strips CSS comments first, then scans the remaining text for declarations matching --name: value; and separately counts every var(--name) reference, so you can see both where a variable is defined and how often it is used.
A variable is often redefined inside different selectors, such as a base value on :root and an overridden value inside a dark-mode class or a media query. This tool flags any variable declared more than once so you can spot unintentional duplicates.
A variable that is declared but never referenced with var() still appears in the results table with a usage count of zero, which makes it easy to spot custom properties that may be safe to remove.
Yes. You can copy a clean :root { } block containing every unique variable and its last declared value, or copy a JSON object mapping each variable name to its value for use in build tooling or design token pipelines.
Keep building with these free online CSS tools.