When should the spacing scale generator use linear instead of modular?

Linear is better when you need familiar values (4, 8, 16, 24) that map directly to grid units. Modular is better for type-driven layouts where you want spacing to compound with the type scale.

Why are rems shown alongside px?

Rem-based spacing scales with the user’s root font size, which is good for accessibility. The px equivalent in the comment makes it easy to validate against design files.

Is the rem column always relative to 16px?

Yes. The tool divides the px value by 16 and trims trailing zeros so the output is clean.

Can I generate more than 20 steps?

No — most design systems use 10–14 steps. Going above 20 produces unusable extremes and was capped deliberately.

Will this match Tailwind’s default scale?

Pick Linear · 4px step with a base of 4 and 12+ steps and you will closely reproduce Tailwind’s default 4, 8, 12 … sequence. For exact parity, override theme.spacing in tailwind.config.

Spacing Scale Generator

Generate a linear or modular spacing scale with px and rem CSS variables.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this spacing scale generator

Enter a base size in pixels (used as the seed for modular scales).
Pick a scale type: Linear · 4px step, Linear · 8px step, or a modular ratio (1.25, 1.333, 1.5, 1.618).
Enter the number of steps you want (3–20).
Press Generate scale to compute the scale with px and rem values for every step.
Use Copy CSS vars to copy a clean --space-N: <rem>rem; /* <px>px */ list to your clipboard.

About this spacing scale generator

The spacing scale generator builds either a linear or a modular scale. A linear scale adds a fixed step each level — pick a 4px or 8px step for the Tailwind-style 4, 8, 12, 16, 20, … sequence. A modular scale multiplies the base by the ratio compounded — base, base × r, base × r², … — which gives a smoother visual rhythm because every step is the same proportion bigger than the last, the same principle the type scale generator uses.

Worked example: base 4px with Linear · 4px step and 10 steps returns --space-1: 0.25rem (4px), --space-2: 0.5rem (8px), --space-3: 0.75rem (12px) … --space-10: 2.5rem (40px). Switching to Modular · 1.25 with the same base would produce --space-1: 0.25rem (4px), --space-2: 0.313rem (5px), --space-3: 0.391rem (6px) … --space-10: 0.931rem (15px) — useful when you want tighter early steps.

Everything runs in the browser. The output CSS variables can be pasted into Tailwind theme.spacing, a CSS :root block, or a design-token JSON file.

FAQ

When should the spacing scale generator use linear instead of modular?: Linear is better when you need familiar values (4, 8, 16, 24) that map directly to grid units. Modular is better for type-driven layouts where you want spacing to compound with the type scale.
Why are rems shown alongside px?: Rem-based spacing scales with the user’s root font size, which is good for accessibility. The px equivalent in the comment makes it easy to validate against design files.
Is the rem column always relative to 16px?: Yes. The tool divides the px value by 16 and trims trailing zeros so the output is clean.
Can I generate more than 20 steps?: No — most design systems use 10–14 steps. Going above 20 produces unusable extremes and was capped deliberately.
Will this match Tailwind’s default scale?: Pick Linear · 4px step with a base of 4 and 12+ steps and you will closely reproduce Tailwind’s default 4, 8, 12 … sequence. For exact parity, override theme.spacing in tailwind.config.