CSS Spacing Scale Generator
About this generator
Build a modular CSS spacing scale from a base size + a musical ratio. 8 ratio presets covering the classic intervals — minor 2nd (1.067), major 2nd (1.125), minor 3rd (1.2), major 3rd (1.25), perfect 4th (1.333), augmented 4th √2 (1.414), perfect 5th (1.5), golden φ (1.618). 4-12 steps with a configurable base-index so you get sizes both below and above your base.
Visual cascade — size-proportional rectangles let you see at a glance whether step-3 is too close to step-4 or whether the ratio is too tight / too loose. Token table below — click any token to copy its var() reference.
5 export formats (CSS / SCSS map / Tailwind config / W3C design tokens / JS object) × 3 naming schemes (T-shirt / numeric / step) × 3 units (rem / px / em). Free and MIT-licensed.
Why use this Spacing Scale Builder?
How to build a modular spacing scale
Modular ratio reference
| Ratio | Vibe | Use for |
|---|---|---|
| Minor 2nd · 1.067 | subtle | Tightest scale — barely-perceptible jumps. Use for dense data UIs where space is at a premium and every step needs to be small. |
| Major 2nd · 1.125 | gentle | Slow, gentle scale. Default for content-heavy sites where you don't want shouty hierarchy. |
| Minor 3rd · 1.200 | balanced | Sweet spot for most product UI. Tailwind's default font-size scale uses 1.2. |
| Major 3rd · 1.250 | clear steps | Each step is clearly bigger than the last. Good when scale needs to be obvious to users (educational, accessible). |
| Perfect 4th · 1.333 | classic | Used in print typography for centuries. Strong but not extreme. Bootstrap's default scale. |
| Aug 4th · 1.414 | paper | √2 — the ratio used in ISO paper sizes (A4, A5, etc.). Each step is exactly twice the area of the next. |
| Perfect 5th · 1.500 | dramatic | Each step is half-again larger. Big visual hierarchy. Good for hero/marketing pages with few but distinctive sizes. |
| Golden · 1.618 | classical | φ — the golden ratio. Subjective preference, mathematically arbitrary. Looks good for premium brands. |
Common spacing-scale patterns
:root {
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2.25rem; /* 36px */
--space-2xl: 3.375rem; /* 54px */
}
.card {
padding: var(--space-md);
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'xs': '0.25rem',
'sm': '0.5rem',
'md': '1rem',
'lg': '1.5rem',
'xl': '2.25rem',
}
}
}
};
// Usage: <div className="p-md gap-sm mb-lg">…</div>{
"spacing": {
"xs": { "value": "0.25rem", "type": "dimension" },
"sm": { "value": "0.5rem", "type": "dimension" },
"md": { "value": "1rem", "type": "dimension" },
"lg": { "value": "1.5rem", "type": "dimension" }
}
}
/* Pipes through Style Dictionary to native iOS/Android too */$space: (
'xs': 0.25rem,
'sm': 0.5rem,
'md': 1rem,
'lg': 1.5rem,
);
.card {
padding: map-get($space, 'md');
gap: map-get($space, 'sm');
}Pro tips
Frequently asked questions
What's a modular ratio and which one should I use?
A modular ratio is a multiplier you apply repeatedly to a base size to generate a harmonious scale. base × ratio = step 2, base × ratio² = step 3, and so on. The classic ratios come from music theory (the same intervals that make harmony in sound also make harmony in space). Perfect fourth (1.333) is the safe default — clear visual steps without dramatic jumps. Golden (1.618) is dramatic, good for hero / display surfaces. Minor 3rd (1.2) is subtle, good for dense UI. Pick by feel; the visual cascade in this generator shows you the result instantly.
Why is there a 'base index' control?
Because the BASE size in your scale is not always the first step. You usually want sizes BELOW your base (xs, sm) and sizes ABOVE (lg, xl, 2xl). The base-index slider says 'put my base at position N in the scale' — steps before it get computed as base × ratio^(-1), base × ratio^(-2), etc. (smaller sizes); steps after it get base × ratio^(+1), base × ratio^(+2), etc. (larger sizes). For an 8-step scale with base at index 3, you get 3 sizes below your base and 4 above.
T-shirt vs numeric naming — which is better?
T-shirt (xs, sm, md, lg, xl, 2xl) is more memorable, easier to scan in code, and the convergent choice for design systems aimed at humans (Tailwind, Bootstrap, Chakra, Material). Numeric (50, 100, 200, 300) is better for design systems that need machine-sortable values or that follow Material's elevation-style scale. Step (step-1, step-2) is neutral — useful when your scale doesn't fit either pattern. Pick by team preference; the export emits whatever you choose.
Why rem instead of px for spacing?
rem scales with the user's browser font-size preference. A user who increases their browser default to 18px (common for accessibility) gets a proportionally larger spacing scale automatically — no media queries needed. With px, your spacing stays fixed regardless of user preferences, which hurts accessibility for low-vision users. WCAG 1.4.4 (Resize Text) is satisfied trivially with rem-based spacing; px-only sites often fail it. The generator defaults to rem; use px only for fixed pixel grids where exact alignment matters.
Should my spacing scale be tied to my type scale?
Yes, ideally. The convergent design-system pattern is: same base size, same ratio for type AND spacing. Type at 16px with ratio 1.25 gives 12.8 / 16 / 20 / 25 / 31.25 / 39px sizes. Spacing at 16px with ratio 1.25 gives matching 12.8 / 16 / 20 / 25 / 31.25 / 39px gaps. Type and spacing harmonize because they share the same musical interval. If you're tuning a complete system, use this generator with the same ratio as your type scale (the letter-spacing generator above can help).
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.