Free Spacing Scale Generator

What Is a Spacing Scale?

A spacing scale is a predefined set of values used consistently for margin, padding, gap, and other layout spacing. Instead of picking 7px here and 11px there, a UI uses a short list such as 4px, 8px, 12px, 16px, 24px, and 32px. Those values become spacing tokens — named CSS variables or design tokens — so components share one rhythm.

A spacing scale generator turns a base unit and a method (linear, modular, or Fibonacci) into that list. You can keep the output in px, rem, or both, then export CSS custom properties for a design system.

How to Use the Spacing Scale Generator

1. Choose a preset — 4px Grid, 8px Grid, Tailwind, or Custom.
2. Set the base and scale method. Linear multiplies the base; modular uses a ratio; Fibonacci normalizes a Fibonacci sequence to the base.
3. Preview the result on the card, stack, and inline samples, then scan the token table.
4. Copy or export the tokens as CSS, Tailwind, SCSS, JavaScript, or JSON.

Spacing Scale Formula

Linear

S(n) = Base × n ÷ BaseIndex. With a 4px base and base index 1, the first steps are 4, 8, 12, 16, 20, 24. Raise the base index to put the named base later in the list (base 8, index 2 yields 4, 8, 12, 16…).

Modular / Ratio

S(n) = Base × Ratio^{(n − BaseIndex)}. A 16px base, ratio 1.25, and base index 3 produces values below and above 16px: 10.24px, 12.8px, 16px, 20px, 25px, 31.25px. Common ratios are 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, and 1.618.

Fibonacci

The generator builds 1, 2, 3, 5, 8, 13… and scales the sequence so the chosen base index equals the base size. Snap-to-grid then rounds those values onto a 4px or 8px grid when you want device-pixel alignment.

4px vs 8px Spacing Scale

Neither grid is universally correct. A 4px spacing scale gives tighter steps (4, 8, 12, 16) that help dense product UI: icon gaps, compact tables, and control padding. An 8px spacing scale (8, 16, 24, 32) is coarser and often easier to scan in marketing pages and large layout gaps.

Many teams keep an 8-point mental model but still expose 4px tokens for half-steps. If your components already sit on 8px, start with the 8px Grid preset. If you need 12px and 20px as first-class tokens, use the 4px Grid or a custom base.

8-Point Grid System Explained

An 8-point grid (also called an 8pt or 8px spacing system) means layout measurements land on multiples of 8 — and often 4 for half-steps. It is useful because common screen densities divide 8 evenly, and because a short even-number scale is easier to remember than arbitrary pixels.

The 8-point grid is a convention, not a law. Icon-heavy toolbars, data-dense admin UI, and print-inspired layouts sometimes need 2px or 6px. Use snap-to-grid when you want alignment; turn it off for modular or Fibonacci values that should stay mathematically exact.

Using Spacing Tokens in CSS

Export the scale as CSS variables, then apply them to padding, margin, and gap. A 4px linear scale writes --space-4: 1rem when the rem root is 16px.

.card {
  padding: var(--space-4);
  gap: var(--space-2);
}

Keep the token name stable even if you later change px/rem. If you need to convert spacing values between px and rem for a one-off check, use the unit converter. For viewport-fluid gaps, create fluid responsive spacing with clamp().

Using Spacing Tokens with Tailwind CSS

The Tailwind preset copies the default spacing table (1px, 2px, 4px, 6px, 8px…) rather than a plain 4, 8, 12 linear list. Export the Tailwind tab into theme.extend.spacing so utilities such as p-4 and gap-2 resolve to your tokens. Then map spacing tokens to Tailwind utilities when you need the class names that consume theme.spacing.

Spacing Scale Examples

4px example

4px Grid, linear, 12 steps: 4px, 8px, 12px, 16px, 20px, 24px. Typical mapping: space-1 icon gap, space-2 tight gap, space-3 component spacing, space-4 padding, space-5 section gap.

8px example

8px Grid, linear, 12 steps: 8px, 16px, 24px, 32px, 40px, 48px. Use this when you want an 8-point grid without half-steps.

px/rem example

The same 4px steps at a 16px rem root: 4px / 0.25rem, 8px / 0.5rem, 12px / 0.75rem, 16px / 1rem, 20px / 1.25rem. Switch the Output control to PX, REM, or Both — exports stay in sync.

Design-system token example

Numeric names write --space-1. T-shirt names write --space-sm. Step names write --space-step-1. JSON export stores $value, px, rem, and the multiplier for each token.

Common Spacing Scale Mistakes

• Arbitrary values everywhere — 7px, 11px, 13px — so components never line up.
• Too many tokens. Twelve well-chosen steps beat thirty near-duplicates.
• Confusing a typography scale with a spacing scale. Type sizes and gaps can share a ratio, but they are not the same token set. Use the generator to create a matching typography scale if you need both.
• Assuming 8px is mandatory in every situation. Dense UI often needs 4px half-steps.
• Ignoring responsive context. A 64px desktop section gap may be 24px on a 320px-wide screen.
• Using px when rem is more appropriate for the system — especially when the root font size can change.

Common Ways People Search for a Spacing Scale

Most visits here start from a practical need: build a CSS spacing scale, check 4px versus 8px steps, or turn those steps into CSS spacing tokens. Some people want a calculator they can share with a teammate; others want a Tailwind spacing scale they can paste into a theme file. Design-system work is the same task with a longer name — a px/rem spacing scale that stays consistent across components.

This page is that generator. It does not replace a full design-system audit. It gives you a shareable, exportable scale you can drop into CSS variables or a Tailwind theme.

Frequently Asked Questions

What is a spacing scale in CSS?

A spacing scale is a fixed list of values used for margin, padding, gap, and similar CSS properties. Common steps are 4px, 8px, 12px, 16px, 24px, and 32px, usually exposed as custom properties such as --space-4.

Should I use a 4px or 8px spacing scale?

Use 4px when you need half-steps (12px, 20px) for dense UI. Use 8px when a coarser 8-point grid is enough. Many systems keep both: 8px for layout, 4px for tight component gaps. Neither is universally required.

What is an 8-point grid?

An 8-point grid is a layout convention where spacing lands on multiples of 8px (and often 4px half-steps). It is popular because those increments divide evenly on common screen densities and stay easy to remember.

How do I create a spacing scale for a design system?

Choose a base (4px or 8px is typical), pick linear, modular, or Fibonacci steps, name the tokens, and export CSS variables or JSON. Keep the token count small — about 8 to 16 steps — and reuse them instead of one-off pixels.

Should spacing tokens use px or rem?

Rem tokens scale with the root font size, which helps when users change text size. Px tokens stay literal. Many design systems store rem in CSS and still document the px equivalent. This generator can emit either or both.

Can I use a spacing scale with Tailwind CSS?

Yes. Use the Tailwind preset or export the Tailwind tab into theme.extend.spacing. Your p-*, m-*, gap-*, and space-* utilities then read the generated tokens. You can still keep CSS variables for non-Tailwind surfaces.

What spacing values should I use for padding and gaps?

A practical 4px linear start is 4px for icon gaps, 8px for tight gaps, 12px for component spacing, 16px for padding, and 24px for section gaps. Adjust after you preview the card and stack samples on this page.

Can I export spacing tokens as CSS variables and JSON?

Yes. The CSS tab writes :root custom properties. The JSON tab writes a spacing object with $value, px, rem, and multiplier for each token. SCSS, Tailwind, and JavaScript exports describe the same scale.