| Value | Status |
|---|
--brand: #228fcb;Paste a stylesheet on the left and every CSS custom property in it appears on the right as you type: its value, where it's defined, how many times it's used with var(), and whether anything looks wrong. The extractor follows var() references to show the final value, puts a swatch next to colors, and flags conflicts, duplicates, unused variables, and variables that are used but never defined. Export the list as a :root block, SCSS or LESS variables, JSON, design tokens, or a JavaScript object. Everything runs in your browser and nothing is uploaded.
How to extract CSS variables
- Paste CSS into the left pane, or click Open file to load a .css, .scss, .less, .html, .vue, or .svelte file. You can also drag a file onto the pane.
- Review the table. Click a variable to see every place it's defined and used, then click a line to jump to it in your code.
- Use the filter box and the type and status menus to narrow the list, for example to colors only or to problems only.
- Switch to Export and choose a format. Turn on Replace var() with values if you want final values instead of references.
- Click Copy or Download.
What the status labels mean
| Label | What it means | What to do |
|---|---|---|
| Conflict | The same selector sets the variable twice with different values, so the second silently wins | Delete the value you don't want |
| Duplicate | The same selector sets the same value more than once | Safe to delete the extra copy |
| Themes | Different values in different selectors or media queries, such as [data-theme="dark"] or @media (prefers-color-scheme: dark) | Usually intentional. The number shows how many places set it |
| Unused | Defined but never read with var() in the code you pasted | Check other stylesheets and JavaScript before removing it |
| Not defined | Used with var() but never set, with no fallback | Define it or add a fallback, like var(--gap, 1rem) |
| Fallback only | Never set, but every use has a fallback value | Fine if the fallback is what you want |
| Circular | Refers back to itself, like --a: var(--b) and --b: var(--a) | Break the loop. Browsers treat both as invalid |
Which value is shown
A custom property can have a different value in every selector, so the table shows one representative value. It uses the last definition on :root, html, or :host outside any media query, which is the value most pages start with. If there isn't one, it uses the last definition outside a media query. !important definitions take priority, as they do in the browser. Every other value is listed when you click the variable, and CSS with every theme exports them all grouped by selector and media query.
When a value refers to another variable, such as --space-2: calc(var(--space-1) * 2), the line under it shows the result with each reference filled in. Fallbacks are used for references that aren't defined.
Export formats
| Format | Example | Good for |
|---|---|---|
| CSS :root block | :root { --brand: #228fcb; } | A clean, single list of base values |
| CSS with every theme | [data-theme="dark"] { --bg: #0d1117; } | Collecting all themes from a large stylesheet into one file |
| SCSS or LESS | $brand: #228fcb; or @brand: #228fcb; | Moving values into a preprocessor. References become $name |
| JSON | {"--brand": "#228fcb"} | Scripts and build tools |
| Design tokens | {"brand": {"$value": "#228fcb", "$type": "color"}} | Style Dictionary, Figma token plugins, and other tools that read the W3C design tokens format. Names like --color-primary-500 become nested groups |
| JavaScript object | brand: "#228fcb" | Theme objects in JavaScript or TypeScript |
What it reads
The extractor parses CSS the way a browser does, so it was checked against Chrome's own CSS parser on large real stylesheets, including Bootstrap and Material for MkDocs, and found exactly the same definitions. It handles:
- Variables inside
@media,@supports,@layer, and@containerblocks, which are labeled with their at-rule. - Native CSS nesting and SCSS or LESS nesting with
&, resolved to full selectors such as.card--featured. - SCSS
//comments and#{$var}interpolation. - Variables registered with
@property, using theirinitial-value. - Escaped names like
--icon\.size, values containing semicolons inside strings, and empty values. - HTML pages: variables in
<style>blocks and in inlinestyle=""attributes.
Unused and undefined labels only reflect the code you pasted. If variables are shared across several files, paste them together for an accurate count.
Frequently asked questions
What is a CSS variable?
A CSS variable, officially called a custom property, is a property whose name starts with two dashes, such as --brand: #228fcb. You read it anywhere in your CSS with var(--brand). Unlike Sass variables, custom properties exist in the browser, so they can change with media queries, themes, or JavaScript.
How do I find all CSS variables used on a website?
Open the site, view its stylesheet in your browser's developer tools (the Sources or Network tab), copy the CSS, and paste it here. You can also save the page as HTML and open that file; the tool reads both style blocks and inline style attributes.
Why is a variable marked as a conflict?
It's defined twice in the same selector and media query with different values, so only the last definition takes effect. Values that differ between selectors, like a light theme on :root and a dark theme on [data-theme="dark"], are labeled Themes instead, because that's usually intentional.
Can I convert CSS variables to SCSS variables?
Yes. Choose SCSS variables in the Export tab. Each --name becomes $name, and references like var(--brand) become $brand. Turn on Replace var() with values if you want plain values instead.
Does it work with SCSS and LESS files?
Yes, it reads custom properties from SCSS and LESS, including nested selectors, // comments, and #{} interpolation. It lists --custom-properties only, not $scss or @less variables.
Can it export design tokens?
Yes. The Design tokens format follows the W3C Design Tokens Community Group JSON format with $value and $type. Dashed names are nested into groups when that can be done without name clashes, and references become token aliases like {color.primary}.
Is my CSS uploaded?
No. The extractor runs entirely in your browser and your code is never sent to a server.