Gera Tools

CSS Custom Properties (Variables) Builder

Generate a CSS :root variables block for your design system tokens

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.

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.

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.

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.