CSS Custom Properties Generator

What design tokens actually buy you

A CSS custom property is a named value you define once and reference everywhere with the var() function. Instead of pasting #3b82f6 into forty rules, you write --color-primary: #3b82f6 once and use var(--color-primary) throughout. Change the one declaration and every button, link, and border that referenced it updates together. When a whole team agrees on a named set of these values — colours, font sizes, spacing steps, shadows — that set is called a design token system, and it is the layer that keeps a product visually consistent as it grows. This tool builds that system for you across seven sections (Colors, Typography, Spacing, Border Radius, Shadows, Z-Index, Breakpoints) and exports it to whichever toolchain you use.

Why a scale beats hand-picked numbers

The default spacing tokens here are not arbitrary: --space-1 is 0.25rem, --space-2 is 0.5rem, --space-4 is 1rem, and so on. They follow a 4-pixel base scale (1rem = 16px, so 0.25rem = 4px), which means every gap and padding in your interface is a multiple of four. That constraint is what makes a layout feel deliberate rather than slightly off. The same logic drives the typography scale — xs, sm, base, lg, xl — and the radius scale. When you add your own tokens, keep them on the scale rather than inventing a one-off 13px, and the whole system stays coherent.

How the four export formats differ

The same token set is reshaped for four targets, and the transformation is mechanical and predictable:

One subtlety worth understanding: the SCSS export and the CSS export are not interchangeable. Sass $ variables are resolved when the stylesheet compiles and then vanish — you cannot change them in the browser or override them per-component with the cascade. CSS custom properties are live at runtime, which is what makes dark mode and per-section theming possible. The Tailwind export is the clever one: it doesn't copy your hex values, it wires Tailwind utilities to var(--color-primary), so your CSS variables remain the single source of truth and Tailwind just consumes them.

A worked example: importing an existing stylesheet

Suppose you paste this into the Import panel:

:root { --color-brand: #ff6600; --font-size-hero: 3rem; --space-10: 2.5rem; }

Click Parse and the tool runs a regular expression that finds every --name: value pair, then sorts each one into a section by its prefix. --color-brand starts with --color- so it lands in Colors; --font-size-hero matches --font- and goes to Typography; --space-10 matches --space- and joins Spacing. Anything whose prefix doesn't match a known group falls back into Colors. This is why a consistent naming convention matters — name a token --brand-orange instead of --color-brand and the importer can't classify it, so it ends up in the wrong bucket.

Practical tips

• Edit colours with the swatch picker. When a token's value is recognised as a colour (a hex code, rgb(), or hsl()), a colour input appears beside it. Picking a new colour updates both the value and the live preview instantly — handy for nudging a palette without typing hex codes.
• Your work persists in the editor, but export to keep it. The token set stays in the page while you work, yet the only permanent copy is what you export and paste into your project. Treat the Copy button as the save step.
• Order your tokens from primitive to semantic. Define raw values first (--blue-500) and then semantic aliases that reference them (--color-primary: var(--blue-500)). Swapping a brand colour then touches one line.

Common mistakes

• Expecting var() to work in media query conditions. Custom properties are great for values but cannot be used in the condition of an @media (min-width: ...) rule. That is exactly why the Breakpoints section exists as plain numbers you copy into your media queries by hand, not as live variables.
• Forgetting a fallback for older renderers. var(--x, fallback) accepts a second argument used when the variable is undefined. Add fallbacks for critical values so a missing token degrades gracefully instead of leaving an unstyled element.
• Mixing units inconsistently. If your spacing scale is in rem, keep it all in rem; sprinkling px into the same scale breaks the proportional resizing you get when a user changes their base font size.