Skip to content

Free tool - no signup

Spacing Scale Generator

Set a base unit and a step, and get a consistent spacing scale in px and rem with copy-ready CSS variables. Snap every margin and padding to the same rhythm. It all runs in your browser.

CSS variables
 
 
 
 
How to use it
 
     
  1. Pick a base unit. 8px is the safe default; 4px gives finer control.
    2.  
  2. Choose linear for product UI or modular for editorial layouts with bigger jumps.
    3.  
  3. Set how many steps you need. Most systems ship 6 to 9.
    4.  
  4. Copy the CSS variables and reference var(--space-3) instead of raw numbers everywhere.
    5.  
 
Why snap spacing to a scale
 

Inconsistent spacing is the fastest way to make a polished interface feel
        amateur, and it usually happens one arbitrary 13px margin at a time. A
        scale removes the guesswork: there is no 13px, only step 3 or step 4, so
        every gap on every screen agrees with the next. That is what makes a
        design system feel like one product rather than fifty pages built by
        fifty moods. Wire the tokens into your components once and spacing stops
        being a decision you relitigate on every card.

 
Common questions
 
 
What is a spacing scale?
A spacing scale is a fixed set of spacing values, usually built from one base unit, that you use for every margin, padding, and gap in a design system. Instead of picking arbitrary numbers like 13px or 27px, you snap to the scale, so spacing stays consistent across the whole interface.
Should I use a 4px or 8px base?
An 8px base is the most common because it divides cleanly on most screens and keeps the scale short. A 4px base gives you finer control for tight components. Many teams use 4px as the base unit but only expose the even multiples (4, 8, 16, 24) as tokens.
Linear or modular spacing?
Linear (multiples of the base) is predictable and works for most product UI. A modular scale (each step multiplied by a ratio) grows faster and suits editorial layouts where you want dramatic jumps between small and large spacing. This tool does both.
Is it free and private?
Yes. No sign-up, no email, no watermark. Everything runs in your browser, so nothing you enter is uploaded. Copy the CSS variables straight into your stylesheet.
 
 

Spacing tokens live next to color and type in a real system. See how they
        fit together in the
step-by-step design system guide,
        then set your type rhythm with the
type scale calculator.