CSS Variables Generator
Generate CSS custom properties from design tokens. Manage colors, typography, spacing, and border radius with a visual editor. Free, browser-based.
How to Use
- Set the Variable Prefix (default
—, change to—brand-etc.). - Edit the pre-filled tokens in each group, or add new ones with + Add Token.
- For color tokens, use the color picker swatch or type a hex value directly.
- The Generated CSS block updates in real time.
- Click Copy to copy the
:root { … }block to your clipboard.
What Are Design Tokens?
Design tokens are the single source of truth for your design decisions — color palettes,
type scales, spacing rhythms, and corner radii. By storing them as CSS custom properties
in a :root block, you make every value accessible throughout your entire
stylesheet. Changing a token in one place cascades to every component that uses it.
Token Groups
- Colors — brand palette, background, text, and state colors with a color picker.
- Typography — font family stacks and base/scale font sizes.
- Spacing — a consistent spacing scale (4 px, 8 px, 16 px, etc.).
- Border Radius — corner radius values from subtle to pill-shaped.
FAQ
What are CSS custom properties (CSS variables)?
CSS custom properties, also called CSS variables, are entities defined with a double-hyphen prefix (e.g. --primary-color: #3b82f6) inside a :root block. They can be reused anywhere in your stylesheet via var(--primary-color), making global design changes fast and consistent.
What is the variable prefix and how do I change it?
The prefix is the string prepended to every variable name. The default is '--' which produces standard CSS custom property syntax. You can change it to '--brand-' or '--theme-' etc. to namespace your tokens and avoid collisions.
How do I add a new design token?
Click the '+ Add Token' button inside any group (Colors, Typography, Spacing, or Border Radius). Fill in the variable name and value. For color tokens a color picker swatch is also provided. The CSS output updates instantly.
Can I remove a token I no longer need?
Yes. Click the × button at the end of any token row to remove it. The CSS output updates immediately.
How do I use the generated CSS in my project?
Click the Copy button to copy the :root block, then paste it into your global stylesheet (e.g. styles/global.css). Reference any token in your component CSS with var(--token-name).