Spacing Scale Generator
Build a consistent spacing system from a base unit and ratio, previewed live and exported as CSS custom properties.
Consistent spacing, no more guesswork
Inconsistent spacing is the quiet reason a design looks "off" — one section uses 18px padding, another 20px, a third 22px, and nothing quite lines up. A spacing scale fixes that by giving you a small, fixed set of values built from a single base unit. This generator produces that scale from your base and step count, either as clean linear multiples or a faster-growing ratio, and previews each step as a bar so you can feel the rhythm.
The output is a block of CSS custom properties — --space-1 through --space-n — ready to
drop into your stylesheet or token file and reference everywhere with var(). Standardizing on it keeps
margins, padding, and gaps coherent across an entire product.
Copy-ready CSS
Generated live in your browser — nothing is uploaded.
Frequently Asked Questions
What is a spacing scale?
A spacing scale is a fixed set of spacing values — for margins, padding, and gaps — derived from a base unit so your layout stays consistent instead of using arbitrary pixel numbers.
Should I use a linear or ratio-based scale?
Linear (multiples of a base like 4px) is predictable and common in design systems. A ratio-based scale grows faster and suits typographic or more expressive spacing. This tool supports both.
How do I use the output?
The generator outputs CSS custom properties like --space-4. Reference them as var(--space-4) in your styles, or paste them into a design-token file.
Is this tool free and private?
Yes. Everything is generated in your browser — no sign-up and nothing uploaded.
Want a full design system with tokens? Let’s build it.