Developer Tools

CSS Variables Extractor

List every CSS custom property in pasted CSS or HTML. Group by selector, classify by type, spot conflicts and orphans, export as :root, JSON, SCSS, or JS.

CSS, SCSS, or HTML containing custom properties1163 chars

:root {
  --color-brand: #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-surface: #ffffff;
  --color-border: rgba(15, 23, 42, 0.08);

--radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

--space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

--font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

--duration-fast: 120ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
  --gradient-hero: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.button {
  background: var(--color-brand);
  color: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-standard);
  box-shadow: var(--shadow-card);
}

.button:hover {
  background: var(--color-brand-hover);
}

[data-theme="dark"] {
  --color-text: #e2e8f0;
  --color-surface: #0f172a;
  --color-border: rgba(226, 232, 240, 0.12);
}

The extractor reads CSS rules, embedded <style> blocks, and inline style attributes. Everything runs in your browser. The CSS or HTML you paste here is never uploaded.

Summary

Unique variables
19
Declarations
22
var() usages
10
Conflicts
3
Same name, different values
Used, not declared
0
Declared, not used
9

Variables

Click a kind to filter the list and the export below.

Name	Value	Kind	Uses	Declared in
--color-border	rgba(15, 23, 42, 0.08) +1 other value	Color	0	:root, [data-theme="dark"]
--color-brand	#2563eb	Color	1	:root
--color-brand-hover	#1d4ed8	Color	1	:root
--color-muted	#64748b	Color	0	:root
--color-surface	#ffffff +1 other value	Color	1	:root, [data-theme="dark"]
--color-text	#0f172a +1 other value	Color	0	:root, [data-theme="dark"]
--duration-fast	120ms	Duration	1	:root
--ease-standard	cubic-bezier(0.4, 0, 0.2, 1)	Easing	1	:root
--font-mono	ui-monospace, SFMono-Regular, Menlo, monospace	Font	0	:root
--font-sans	ui-sans-serif, system-ui, -apple-system, sans-serif	Font	1	:root
--gradient-hero	linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)	Gradient	0	:root
--radius-lg	16px	Length	0	:root
--radius-md	8px	Length	1	:root
--radius-sm	4px	Length	0	:root
--shadow-card	0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08)	Shadow	1	:root
--space-1	4px	Length	0	:root
--space-2	8px	Length	1	:root
--space-3	16px	Length	1	:root
--space-4	24px	Length	0	:root

Export

Pick a format. The export reflects the current filter.

:root {
  --color-border: rgba(15, 23, 42, 0.08);
  --color-brand: #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-muted: #64748b;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --duration-fast: 120ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gradient-hero: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
}

Declared, never used

These variables are declared but the input never calls var() on them. They could be dead code, or they could be consumed by a stylesheet not pasted here.

--color-border
--color-muted
--color-text
--font-mono
--gradient-hero
--radius-lg
--radius-sm
--space-1
--space-4

How to use

Paste a stylesheet, an SCSS file, or any HTML containing <style> blocks or style attributes into the input. Click Load sample to see a worked example with colors, spacing, fonts, durations, gradients, and a dark theme override.
Read the summary cards: unique variables, total declarations, total var() usages, conflicts (same name, different values), used but never declared, and declared but never used.
Use the kind filter chips above the table to keep only colors, lengths, durations, fonts, or any other category. The filter also reshapes the export below.
Pick an export format: :root CSS, JSON, SCSS variables, or a JS token object. Click Copy export to grab the result.
Review the audit boxes at the bottom to find references to variables that are not declared in the pasted input, and declarations that no rule references through var().

About this tool

CSS Variables Extractor scans a block of CSS, SCSS, or HTML and lists every custom property declaration (--name: value) found, the selector or rule each declaration appears under, and the number of times each variable is referenced through var(). The parser is comment-aware and handles the messy real-world inputs people paste into a sandbox: multi-line values, nested parentheses inside linear-gradient and box-shadow values, string literals with embedded semicolons, the new CSS Nesting syntax, multiple :root blocks across themes, embedded <style> blocks, and inline style= attributes. Each variable is classified as a color, length, percentage, duration, easing, number, font, gradient, shadow, keyword, string, url, calc expression, or a var() reference, so the output reads like a design-token table instead of a flat dump. The extractor also surfaces three audit signals at a glance: name conflicts (the same --variable assigned different values across selectors, which is normal inside dark-mode overrides but worth a second look elsewhere), used-but-never-declared variables (referenced through var() but missing from the input), and declared-but-never-used variables (potential dead code if the rest of the codebase is also pasted in). Four export formats are available with one click: a :root CSS block ready to paste into a stylesheet, a JSON object for design-system tooling, a SCSS list ($name: value;) for migration, and a JavaScript token object for theme files. Filtering the variables table by kind (only colors, only lengths, only durations, and so on) also filters the export so a designer can grab just the color tokens or just the spacing scale. Everything runs in the browser; the CSS or HTML you paste here is never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Variables Extractor

How to use

About this tool

You may also like

CSS Color Extractor

CSS Formatter

CSS Minifier

HTML Attribute Extractor

CSS to Tailwind Converter

Tailwind Color Finder