What are CSS custom properties?

CSS custom properties, also called CSS variables, are values you define once with a -- prefix and reuse anywhere via var(). Unlike preprocessor variables they are live in the browser, so they can be changed at runtime and respond to media queries.

How is the spacing scale calculated?

Each step is its multiplier times the base value in pixels. With a base of 4 and a step of 6, the token --space-6 becomes 24px. This produces a consistent rhythm where all spacing is a multiple of one base unit.

What is a modular type scale?

A modular scale sizes type by repeatedly multiplying or dividing a base size by a ratio. With a 16px base and a 1.25 ratio, each step up is 25 percent larger, giving a harmonious sequence of font sizes expressed here in rem.

Why use a z-index scale instead of arbitrary numbers?

Naming z-index layers like dropdown, sticky, modal, and toast with spaced-out values prevents the stacking-order arms race where developers keep adding higher and higher numbers. Components reference the intent, not a magic number.

Should I add a prefix to my tokens?

A prefix like ds- namespaces your tokens so they cannot collide with variables from a third-party library or another part of a large app. It is optional; leave it blank for short, simple projects.

What is the CSS Custom Properties (Variables) Builder?

Builds a CSS :root block of design tokens — color variables, a px spacing scale, a modular typographic scale in rem, named border-radius tokens, shadow presets, and a z-index scale — with an optional namespace prefix. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Custom Properties (Variables) Builder

Name: CSS Custom Properties (Variables) Builder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Generate a complete token set in one block

A design system lives or dies by its tokens — the named colors, spacing steps, font sizes, radii, and elevation values that every component pulls from. This builder produces a single :root block of CSS custom properties from a few inputs, so your whole UI references var(--space-4) and var(--color-primary) instead of scattered magic numbers.

How it works

Colors are passed straight through as --color-* variables, with a swatch picker for convenience. The spacing scale is computed: each multiplier you list is multiplied by the base unit, so a base of 4 and a step of 8 yields --space-8: 32px. Anchoring everything to one base unit gives the layout a consistent vertical and horizontal rhythm.

Typography uses a modular scale. Starting from your base font size, each step is the previous size multiplied (or divided) by the ratio: a 16px base at ratio 1.25 makes --font-lg 25% larger than base and --font-sm 25% smaller, all emitted in rem so they respect user font-size preferences. Radii are parsed from name:px pairs into --radius-* tokens, shadows ship as three sensible presets, and a --z-* scale names the common stacking layers (dropdown, sticky, modal, toast) with gaps between them so you never fight over z-index numbers again. An optional prefix namespaces every token.

Worked example output

With a 4px spacing base, a 1.25 typographic ratio from 16px, and default radii, the generated block looks like:

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;

  /* Typography */
  --font-sm: 0.8rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.563rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

This single :root block becomes the source of truth for the entire project. Every component that references var(--color-primary) updates automatically when you change the one declaration.

Using tokens for dark mode

Because custom properties resolve at runtime, you can redefine them in a prefers-color-scheme media query or a data attribute without touching any component CSS:

:root {
  --color-background: #ffffff;
  --color-text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0f172a;
    --color-text: #f8fafc;
  }
}

Any component using var(--color-background) switches automatically — no JavaScript, no class toggling needed.

Tips and notes

Because custom properties are live in the browser, you can redefine any of them inside a media query or a [data-theme="dark"] selector to theme the whole app without touching component CSS. Keep token names semantic (--color-primary, not --color-blue) so a rebrand is a one-line change. Reference tokens through var() everywhere and resist hardcoding raw values — that discipline is the entire point of a token layer.