CSS Variable Extractor
Paste any CSS — get back every --var-name: value declaration grouped by selector. Useful for auditing a design system, copying tokens from one site to another, or building a documentation table.
How to use the CSS Variable Extractor
Paste CSS — the tool finds every --*: value; declaration, groups by the containing selector (typically :root or [data-theme="dark"]), and shows color values with swatches. Click any value to copy.
Auditing CSS custom properties
CSS custom properties — the --name: value declarations — are where modern stylesheets keep their design tokens: colors, spacing, fonts, radii. On a real project they pile up across :root, a dark-theme selector, and component scopes, and there is no built-in way to list them all. Scrolling a stylesheet hunting for every -- is slow and misses some.
Paste any CSS and this pulls out every custom property, grouped by the selector that defines it, with swatches for color values so a palette is visible at a glance. It is the inverse of generators that produce tokens: build a color ramp with the monochromatic palette or a type scale with the typography scale generator, then use this to audit the variables they emit.
Common use cases
- Design-system audits — list every token a stylesheet defines.
- Theme comparison — see light and dark scope variables side by side.
- Token migration — copy custom properties from one project to another.
- Documentation — build a reference table of variables and values.
- Color inventory — spot every color token via its swatch.