CSS Variable Generator

Generate CSS custom properties for colors, spacing scales, and typography.

Tab: COLORSVariables: 5CSS Size: 150 B

Presets

Output: :root { ... }

:root {
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-accent: #06b6d4;
  --color-background: #ffffff;
  --color-text: #1f2937;
}

About CSS Variable Generator

CSS custom properties (variables) allow you to define reusable values in a central location using the :root selector and reference them with var(--name). This generator helps you build three types of design token sets: color palettes with semantic names, spacing scales based on a base unit and multiplier, and typographic scales using classic musical ratios like the Perfect Fourth (1.333) or the Golden Ratio (1.618).

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a `:root` block from a palette or a spacing scale.
Turning an ad-hoc set of values into named tokens.
Generating variables that a theme can override per mode.
Producing a token block to review before adopting it.
Converting a design handoff into custom properties.

Frequently Asked Questions

What makes custom properties different from Sass variables?: They exist at runtime. A Sass variable is substituted at compile time and is gone from the output, so nothing can change it later; a custom property lives in the cascade, inherits, can be overridden per selector or per media query, and can be read and written from JavaScript.
Why base a type scale on a musical ratio?: Because a constant ratio between steps produces sizes that stay distinguishable at every level, the same reason intervals work in music. The presets are the traditional ones: 1.250 major third, 1.333 perfect fourth, 1.414 augmented fourth, 1.500 perfect fifth, 1.618 golden ratio.
Which ratio should I pick?: Smaller ratios for dense interfaces, larger for editorial pages. 1.250 keeps nine steps inside a usable range; 1.618 grows so fast that the top of a nine-step scale is over 25× the base, which is a poster, not a heading. Ratios above about 1.5 usually need fewer steps.
Should the variables go on :root or on html?: `:root` — it is the same element as `html` but with higher specificity (0,1,0 rather than 0,0,1), so a token defined there is harder to override by accident. Anything defined on `:root` inherits to the whole document, which is what makes one override swap a theme.
Why name a colour token by role rather than by hue?: Because `--brand-primary` survives a rebrand and `--indigo-500` does not. The generator emits your chosen names verbatim, so the discipline is yours — but a dark theme that has to redefine `--blue` as an orange is the usual sign the palette was named for what it looked like rather than what it does.

Common errors and gotchas

Naming variables after their value, which makes a change a rename across the codebase.
Defining a variable only inside a media query, so it is undefined elsewhere.
Producing so many tokens that nobody knows which to use.
Forgetting custom properties inherit, so an override affects more than intended.
Using a variable in a place that needs a static value, such as inside a media query condition.