Free tool No sign-up

CSS Variable Inspector

Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.

cssvariablesdesign-tokensthemeinspector

CSS Input

Examples:

Inspector

⟶
Paste any CSS with --variables on the left
swatches · resolution chains · live filter

Why inspect CSS variables?

🎨

See your design system at a glance

Token files are easy to write but hard to scan. A live inspector renders every colour as a swatch, every size as a green chip, and groups them by selector — so you can audit a system in seconds.

🧭

Trace var() chains

--button-bg → var(--brand-500) → #7c6cff. Multi-step alias chains are common in design systems but invisible in raw CSS — the inspector follows them and shows the final resolved value.

🚨

Spot unresolved references

Pink "unresolved" badges flag any var() that points to a variable you forgot to define — typos, missing imports, or removed tokens that other rules still depend on.

🧱

Audit theme overrides

Compare :root against [data-theme="dark"] or .theme-brand-b in one view. Filter by scope to see which tokens each theme overrides — and which ones it should but doesn't.

▶

How to use this inspector

Paste your CSS

Drop a :root block, a full stylesheet, or a few scattered declarations. The parser handles multiple selectors (:root, .theme, [data-theme]) and bare declaration lists.

Browse the inspector

Each variable becomes a row: a colour swatch or type tag, the variable name, the raw value, and — if it references another var — the resolved final value.

Filter what you need

Type in the search box to filter by name or value. Use Scope chips to narrow to one selector, and Type chips to view only colors, sizes, var() refs, functions, fonts, etc.

Click to copy

Click any variable row to copy "name: value" to your clipboard. Hit Copy All to grab a full ready-to-paste :root { … } block of the currently filtered set.

⇄

Value types the inspector recognises

Value	Detected type	Note
`#7c6cff`	`color`	`Hex colour — swatch rendered`
`rgba(124, 108, 255, 0.5)`	`color`	`rgba / hsl / oklch all detected`
`221.2 83.2% 53.3%`	`color`	`shadcn-style HSL triple`
`16px`	`size`	`Length — px / rem / em / %`
`1.5`	`number`	`Unitless — line-height, opacity`
`200ms`	`time`	`Duration — ms or s`
`90deg`	`angle`	`Angle — deg / rad / turn / grad`
`var(--brand-500)`	`var`	`Variable reference — chain shown`
`clamp(1rem, 2vw, 1.5rem)`	`function`	`CSS function — kept verbatim`
`cubic-bezier(0.4,0,0.2,1)`	`function`	`Easing curve`
`"Inter", system-ui`	`font`	`Font stack`
`0 4px 6px rgba(0,0,0,0.1)`	`shadow`	`Composite shadow value`

Variables in practice

Aliases

:root {
  --brand-500: #7c6cff;
  --brand-600: #6a5be6;

  --button-bg: var(--brand-500);
  --button-bg-hover: var(--brand-600);
}

.btn {
  background: var(--button-bg);
  transition: background 200ms;
}
.btn:hover { background: var(--button-bg-hover); }

Theme

/* Theme via attribute selector */
:root {
  --bg: white;
  --fg: #111;
}
[data-theme="dark"] {
  --bg: #0f0f13;
  --fg: #f0eeff;
}

body {
  background: var(--bg);
  color: var(--fg);
}

Fallbacks

/* Always provide fallbacks for safety */
.alert {
  /* If --color-danger is missing, fall back to crimson */
  background: var(--color-danger, crimson);

  /* Fallbacks chain too */
  border-radius: var(--radius-card, var(--radius, 8px));
}

✦

Pro tips

Group tokens by purpose

Comments inside :root won't survive minification, but during authoring they signal intent. Order tokens by category — colours, spacing, typography, motion — to keep audits fast.

Prefer aliases over duplicates

Write --brand-500 once and let --button-bg, --link-color, and --focus-ring reference it. Single source of truth means rebrands are a one-line change, not a search-and-replace.

Watch the cascade

Variables follow normal cascade rules. A redefine in [data-theme="dark"] only applies when that ancestor matches — which is exactly why theme overrides work, and why typos in selectors silently fail.

Use fallbacks for safety

var(--color-accent, #7c6cff) keeps your component working if the token is ever removed or imported in the wrong order. Cheap insurance for design-system-driven components.