CSS Variables Generator
Design CSS custom properties as typed tokens — color, size, number, text — with light & dark values, scale generators, and a live preview. Import existing CSS and export :root CSS, SCSS, Tailwind v4 @theme, or a JS token map.
About this ToolHow it works, benefits & use casesTap to collapse
Design tokens are easier to manage when they're typed and theme-aware, and this generator treats every CSS custom property as exactly that. Add variables typed as color, size, number, or text — colors get a picker, sizes get a number stepper with a unit dropdown — and give each one a light and a dark value. Choose a theming strategy (single theme, a toggled .dark class, or prefers-color-scheme media query), and the export ships a dark block containing only the tokens that actually change. Two one-click generators scaffold a spacing scale and a modular type scale, and you can paste existing :root CSS to import its variables as tokens. A live preview card renders your tokens in context with a light/dark switch and color swatches. Export to :root CSS, SCSS variables, a Tailwind v4 @theme block, or a JS token map.
How to Use
- 1Pick a Theme strategy: Single, ".dark class", or "prefers-color-scheme".
- 2Click Add to create a variable, name it, and choose its type (Color, Size, Number, or Text).
- 3Edit each token's Light value — and its Dark value when a dark theme is enabled — using the type-aware editor.
- 4Use the Spacing scale and Type scale buttons to generate a set of tokens at once, or expand "Import from CSS" to paste existing :root rules.
- 5Toggle the preview between light and dark to check your tokens in a sample card.
- 6Select an Output format (CSS, SCSS, Tailwind v4 @theme, or JS tokens) and copy, download, or share it.
Key Benefits
- Typed tokens — color, size, number, text — each with an appropriate editor
- Paired light and dark values with single / .dark class / media-query strategies
- Dark export contains only the tokens that differ, keeping CSS lean
- One-click spacing (linear) and type (modular) scale generators
- Imports existing :root CSS and turns its variables into editable tokens
- Live preview card with a light/dark toggle, color swatches, and size bars
- Exports to :root CSS, SCSS, Tailwind v4 @theme, or a JS token map
Common Use Cases
- Bootstrapping a project's design-token layer with light and dark themes
- Generating a consistent spacing or type scale in seconds
- Migrating hard-coded :root variables into a managed, typed token set
- Producing a Tailwind v4 @theme block from an existing palette
- Handing a teammate a JS token map for use in a styling library
Preview
Styled with your variables.
Copy, download, share, or pipe to another tool
:root {
--color-primary: #6366f1;
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #0f172a;
--color-muted: #64748b;
--color-border: #e2e8f0;
--radius: 8px;
--space: 16px;
--font-size: 16px;
--shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.dark {
--color-primary: #818cf8;
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-text: #f1f5f9;
--color-muted: #94a3b8;
--color-border: #334155;
--shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}Theme
Variables (10)
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
- --LightDark
Import from CSS
Typed tokens, real theming
Each variable is typed — colors get a picker, sizes a stepper — and carries a light and dark value. The CSS export ships a .dark (or prefers-color-scheme) block with only the tokens that change. Generate spacing/type scales in one click, paste existing CSS to import, and export to SCSS, a Tailwind v4 @theme, or a JS token map.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related guide
Related tools
- Design Token GeneratorPerceptual colour ramps + light/dark semantic tokens, live preview, WCAG audit — export CSS, Tailwind v4, W3C DTCG & more
- Spacing Scale CalculatorLinear, geometric, Fibonacci or modular spacing scales with a visual ruler preview and utility classes — export CSS, Tailwind v4, SCSS, JSON
- CSS FormatterFormat and beautify CSS code
- Z-Index ManagerBuild a named z-index scale with a visual stack, conflict detection, and CSS/SCSS/JS/TS/Tailwind export
- Palette GeneratorGenerate color palettes from a base color
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
Each variable can be typed as color, size, number, or text. Colors get a swatch picker paired with a hex field, sizes get a numeric stepper with a unit dropdown, numbers get a plain stepper, and text gets a monospace input. The type also drives how the token renders in the live preview.
Each token carries a separate light and dark value, and you choose a strategy: a toggled .dark class or a prefers-color-scheme media query (or no dark theme at all). The export writes the light values in :root and emits a dark block that overrides only the tokens whose value actually changes.