Spacing Scale Generator
Choose a base unit and how the steps grow. See each space as a bar, in pixels and in rem, and copy the CSS variables.
Worked examples
Fibonacci steps on an 8px base
Base 8px, Fibonacci, 5 steps
8, 16, 24, 40 and 64 pixels, or 0.5, 1, 1.5, 2.5 and 4 rem
The multiples are 1, 2, 3, 5 and 8.
About Spacing Scale Generator
A spacing scale is a short list of allowed gaps, used for margins, padding and gaps across a whole design. Using a scale instead of picking numbers one at a time keeps a layout consistent and makes changes easy, because every space comes from the same base unit.
Choose a base unit, usually 4 or 8 pixels, and how the steps grow: straight multiples for fine control, doubling for a few clearly different gaps, Fibonacci for a gentler curve, or a list of your own. You see each step in pixels, rem and as a bar, and you can copy the result as CSS variables.
How to use Spacing Scale Generator
- Enter the base unit.
- Choose how the steps grow, or type your own multiples.
- Set the number of steps.
- Copy the CSS variables.
Common uses
- Defining spacing tokens for a design system
- Converting a design file's spacing into rem
- Choosing between a 4 pixel and an 8 pixel grid
- Checking that gaps in a layout come from a scale
Frequently asked questions
Should the base unit be 4 or 8 pixels?
A 4 pixel base gives finer control and works for compact interfaces. An 8 pixel base gives fewer choices and bigger jumps, which keeps designs simpler and consistent.
Why are variable names based on the multiple?
A name such as --space-4 means four times the base. If you later change the base, the names still tell the truth, which would not be the case with names such as small or large.
Why use rem instead of pixels?
Rem sizes grow when a visitor increases their default text size, so spacing stays in proportion to the text. Pixel spacing stays fixed and can look cramped.
What is the Fibonacci option for?
Each step is the sum of the two before it, so gaps grow quickly without the jumps of doubling. It suits layouts that need a gentle, natural progression.