CSS Variable Extractor
Extract CSS custom properties (variables) from any stylesheet. Paste CSS to see all --var definitions in a sortable, searchable table with live preview and copy support.
| Variable | Value | Copy |
|---|
About this tool
CSS custom properties (also known as CSS variables) let you store reusable values and reference them throughout your stylesheet with the var() function. This tool extracts every --name: value; declaration from pasted CSS into a clean, sortable table.
Paste a full stylesheet, a :root block, or component-level scoped variables. The tool parses out each variable name and its resolved value, deduplicates by name, and lets you search, sort, and copy individual values or the whole set.
Example: paste :root { --primary: #4a7aef; --radius: 8px; } and the table shows two rows. Click Copy on any cell for that value, or Copy All for a complete block ready to drop into your project.
FAQ
Does this tool work with @media or @supports blocks? ›
Yes. The extractor scans the entire CSS text for any --name: value; declaration, regardless of which block it appears in. Scoped variables inside @media, @supports, or component selectors are all captured.
What if the same variable is defined twice? ›
When the same variable name appears more than once, the last definition in the CSS text wins — matching how CSS cascade works for custom properties on the same element.
Can I extract variables from a live website? ›
This tool works with pasted CSS text. To get variables from a live site, open DevTools, go to the Elements tab, find the html or body element, and look at the Styles panel — or paste the contents of any linked stylesheet directly.
How do I use a CSS variable after extracting it? ›
Once you know the variable name, use it in your CSS with the var() function: color: var(--color-primary). You can also provide a fallback: color: var(--color-primary, #000).