Spacing scale generator
Generate a spacing scale from a base unit and a stepping rule (linear, multiple, Fibonacci or a 4px grid), emitted as --space-* variables with a px / rem table and usage snippets.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Spacing options
Step n follows the chosen rule: linear base × n, multiple base × 2^(n-1), Fibonacci base × fib(n), and the grid rule snaps base × n to the grid unit. Step 0 is always 0.
Live preview
The preview renders with the current spacing, so the gaps between the blocks are the variable values.
Formula：space(n) = 4px × n
Result
| Step | Variable | px | rem |
|---|---|---|---|
| 0 | --space-0 | 0 | 0 |
| 1 | --space-1 | 4 | 0.25 |
| 2 | --space-2 | 8 | 0.5 |
| 3 | --space-3 | 12 | 0.75 |
| 4 | --space-4 | 16 | 1 |
| 5 | --space-5 | 20 | 1.25 |
| 6 | --space-6 | 24 | 1.5 |
| 7 | --space-7 | 28 | 1.75 |
| 8 | --space-8 | 32 | 2 |
:root {
--space-0: 0; /* 0rem */
--space-1: 4px; /* 0.25rem */
--space-2: 8px; /* 0.5rem */
--space-3: 12px; /* 0.75rem */
--space-4: 16px; /* 1rem */
--space-5: 20px; /* 1.25rem */
--space-6: 24px; /* 1.5rem */
--space-7: 28px; /* 1.75rem */
--space-8: 32px; /* 2rem */
}
/* usage */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.section {
padding-block: var(--space-8);
padding-inline: var(--space-2);
}:root {
--space-0: 0; /* 0rem */
--space-1: 4px; /* 0.25rem */
--space-2: 8px; /* 0.5rem */
--space-3: 12px; /* 0.75rem */
--space-4: 16px; /* 1rem */
--space-5: 20px; /* 1.25rem */
--space-6: 24px; /* 1.5rem */
--space-7: 28px; /* 1.75rem */
--space-8: 32px; /* 2rem */
}/* usage */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.section {
padding-block: var(--space-8);
padding-inline: var(--space-2);
}What this tool does
- Define a spacing ladder for a design system: a 4px base with the linear rule suits dense interfaces, an 8px base with Fibonacci suits spacious marketing pages.
- Collapse the 3px, 7px and 13px values scattered across your stylesheets into one set of --space-* variables, so a rebrand is a single base unit change.
- Stay on a 4px or 8px grid: the grid rule snaps any base unit to a multiple of the grid, so no half pixels or off-grid values slip through.
- Document a component library: paste the px / rem table so designers and developers read the same token the same way.
Example
Input
Base unit 4px, linear rule, 8 steps, root size 16px, include step 0
Output
Formula space(n) = 4px × n; variables --space-0: 0 (0rem), --space-1: 4px (0.25rem), --space-2: 8px (0.5rem), --space-3: 12px (0.75rem), --space-4: 16px (1rem) … up to --space-8: 32px (2rem)
In the usage snippet .stack uses gap: var(--space-2) and .section uses padding-block: var(--space-8).
Frequently asked questions
Linear, multiple or Fibonacci?
Linear suits interfaces with many small steps (4px or 8px): the values stay predictable and memorable. The multiple rule doubles every step, so keep the step count low — step 8 is already 128× the base. Fibonacci sits in between: slow growth at first, wider gaps later, which works when you need both tight and generous spacing.
What does grid snapping do?
It rounds base × n to the nearest multiple of the grid unit. With a 3px base and a 4px grid, step 1 (3px) snaps to 4px and step 3 (9px) snaps to 8px. Even when the base unit is not a multiple of the grid, every value lands on the 4px grid.
Why is step 0 listed separately?
--space-0: 0 makes it explicit when spacing is intentionally removed, for example in a reset or a responsive rule, rather than writing a bare 0. Uncheck the option and the scale simply starts at --space-1.
Should spacing be rem or px?
The table gives both. rem follows the reader’s root font size, which is better for accessibility and for typography-related spacing; px is more predictable for fixed-size controls such as button heights. The variables are emitted in px with the rem value in a comment.
Is there a step limit?
Up to 20 steps. With the multiple or Fibonacci rules the values grow quickly, and 8–12 steps already covers 4px through 96px in most projects; more than that just makes the right step harder to choose.
Keywords：spacing scalespacing systemdesign tokens4px gridfibonaccicss variables间距系统间距阶梯基准单位8px 网格设计令牌CSS 变量