What are CSS custom properties (CSS variables)?

CSS custom properties — also called CSS variables — are values defined with a -- prefix inside a :root {} block (e.g. --color-primary: #7c3aed). They can be reused anywhere in your stylesheet with var(--color-primary). They are the foundation of maintainable design systems.

What token categories does the generator support?

The generator supports five categories: Color (e.g. --color-primary), Spacing (e.g. --space-4), Typography (e.g. --font-size-base), Border Radius (e.g. --radius-md), and Shadow (e.g. --shadow-lg). Output is grouped by category for readability.

Is this compatible with Tailwind CSS, Bootstrap, or other frameworks?

Yes. The output is plain CSS that works with any framework. For Tailwind CSS v4, use the @theme block with --color- prefixed tokens. For Bootstrap, override the :root custom properties directly. The variable naming is entirely up to you.

Can I use this for dark mode tokens?

Yes. Generate your light mode tokens first, copy the output, then clear and add your dark mode values. Wrap the second block in a .dark {} or [data-theme='dark'] {} selector in your stylesheet.

Does my token data get sent to any server?

No. Everything runs entirely in your browser — no server, no database, no tracking of your design tokens. Your data never leaves your machine.

Free CSS Design Token Tool

Turn Design Tokens into
CSS Custom Properties

Add your colors, spacing, typography, and more. Get a production-ready :root {} CSS block instantly — no setup, no login, 100% in your browser.

🎨

5 Token Categories

Color, spacing, typography, border-radius, and shadow — organized and grouped automatically in the output.

⚡

Instant Live Preview

See your :root {} block update in real time as you add, edit, or remove tokens. Copy with one click.

🔒

100% Private

Everything runs in your browser. Your design tokens never leave your machine.

Add Token

Variable name

Value

🎨

Color

📐

Spacing

✍️

Typography

⬜

Border Radius

🌑

Shadow

:root { }13 tokens

:root {
  /* 🎨 Color */
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --color-background: #ffffff;
  --color-foreground: #0f0f0f;

  /* 📐 Spacing */
  --space-1: 0.25rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* ✍️ Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;

  /* ⬜ Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;

  /* 🌑 Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

Frequently Asked Questions

Everything you need to know about CSS Variables Generator.

Turn Design Tokens intoCSS Custom Properties