Local CSS spacing token generator

Build a consistent CSS spacing scale

Set a base unit and ratio to generate visual spacing tokens, preview their rhythm, and copy the CSS variables.

rem uses this root

Ready

Spacing token preview

--space-1
4pxvar(--space-1)
--space-2
5pxvar(--space-2)
--space-3
6.25pxvar(--space-3)
--space-4
7.81pxvar(--space-4)
--space-5
9.77pxvar(--space-5)
--space-6
12.21pxvar(--space-6)
--space-7
15.26pxvar(--space-7)
--space-8
19.07pxvar(--space-8)
:root {
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6.25px;
  --space-4: 7.81px;
  --space-5: 9.77px;
  --space-6: 12.21px;
  --space-7: 15.26px;
  --space-8: 19.07px;
}

Nothing is uploaded. Processing stays in this browser tab.

Why use a spacing scale?

A small set of related values makes padding, gaps, and margins easier to review across a product.

A linear ratio keeps steps predictable while leaving room between compact and spacious layouts.

Use the preview to judge rhythm, then use the custom properties with var(--space-3) in your CSS.

Spacing scale questions

What ratio should I start with?

1.25 creates gentle steps, while 1.5 creates stronger separation for larger layouts.

When should I use rem?

Use rem when spacing should follow the document's root font size; use px when the design calls for fixed values.

Are these design tokens?

Yes. The output is a small CSS custom property set that can act as a shared spacing vocabulary.