CSS Variable Extractor

Paste CSS and instantly see all custom properties (--variables), their values, and selectors.

CSS input

Extracted variables (13 of 13)

--color-primary(:root)

#3b82f6

--color-secondary(:root)

#6366f1

--color-accent(:root)

oklch(70% 0.2 250)

--font-size-base(:root)

1rem

--font-size-lg(:root)

1.125rem

--spacing-sm(:root)

0.5rem

--spacing-md(:root)

1rem

--spacing-lg(:root)

2rem

--border-radius(:root)

0.375rem

--shadow(:root)

0 1px 3px rgba(0,0,0,0.12)

--btn-bg(.button)

var(--color-primary)

--btn-color(.button)

white

--btn-padding(.button)

var(--spacing-sm) var(--spacing-md)

Extract CSS custom properties from any stylesheet

CSS custom properties (also called CSS variables) are declared with a -- prefix and referenced using var(--name). They are scoped to the selector they are declared in — most design systems declare them on :root for global access. This tool extracts all declarations, identifies color values with a preview swatch, and lets you filter and copy individual properties or the full list. For related tools, see CSS Minifier and Color Converter.

Private & free — this tool runs entirely in your browser.