CSS custom properties

Extract the CSS variables of any website

Design Snap is a free Chrome extension that lists every CSS custom property declared on :root of any website — name, computed value, and a color swatch when the value is a color. One click captures the full set, and the CSS Vars export gives you a clean :root block ready to paste.

Add to Chrome — it's free See PRO plans

Free plan · No account · 100% local analysis

How to extract the CSS variables of a website

Extracting a site's CSS variables takes three steps: install Design Snap, press Extract on the page, and open the CSS Variables tab. Design systems like Stripe's expose hundreds of custom properties — Design Snap captures every one declared on :root, in about a second.

  1. Install

    Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.

  2. Extract

    Open the website and press Extract. The CSS Variables tab lists every :root custom property with its value.

  3. Export

    Click CSS Vars for a paste-ready :root block — or export the same tokens as JSON, Tailwind or Figma.

The full token set, not a sample

CSS custom properties are where modern design systems live. Reading them gives you the exact tokens the site's own developers use.

  • Every :root custom property, with computed values
  • Color values get a visual swatch next to the hex
  • Works on heavy design systems — 712 variables extracted on stripe.com
  • Element inspector resolves component-level variable values on hover
  • 100% local: the page's CSS never leaves your browser
stripe.com
Design Snap popup on stripe.com showing the extraction summary: top 5 colors, 1 font, 712 CSS variables captured
variables.css CSS Vars export — Free
:root {
  --color-primary: #6366f1;
  --color-background: #f8fafc;
  --color-ink: #0f172a;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
}
tokens.json Style Dictionary — Free
{
  "color": {
    "primary":    { "value": "#6366f1" },
    "background": { "value": "#f8fafc" }
  },
  "radius": {
    "md": { "value": "8px" }
  }
}

CSS variables — FAQ

Install Design Snap, open the website and press Extract. The CSS Variables tab lists every custom property declared on :root — its name, its computed value, and a color swatch when the value is a color. Sites like Stripe expose hundreds of variables; Design Snap captures all of them in one click.

Yes. The CSS Vars export generates a clean :root block with all extracted tokens, ready to paste into a stylesheet. You can also export the same tokens as Style Dictionary JSON, a tailwind.config.js object or Figma tokens — all included in the free plan.

Design Snap lists the custom properties declared on :root, which is where design systems declare their global tokens by convention. Component-scoped variables are covered through the element inspector: hover any element to see its computed styles, including resolved variable values.

Tailwind theme generator

Get a ready-to-paste tailwind.config.js or Tailwind v4 @theme from any site.

shadcn/ui theme generator

Map any site's palette to shadcn/ui semantic roles, ready for globals.css.

Color palette extractor

Get any website's colors ranked by real usage, with hex values.

vs DevTools & CSS Peeper

How Design Snap compares to Chrome DevTools and CSS Peeper.