Spacing Scale Generator

Generate consistent spacing scales for design systems — Tailwind, CSS variables, SCSS, and more.

Scale Settings

Scale Method

Unit

Number of steps: 12

Variable Prefix

Preview Color

Visual Scale

12 values · tailwind

0px

0.5

0.5px

1px

1.5

1.5px

2px

2.5

2.5px

3px

3.5

3.5px

4px

5px

6px

7px

Spacing Table

Name	px	rem
space-0	0px	0.000rem
space-0.5	0.5px	0.031rem
space-1	1px	0.063rem
space-1.5	1.5px	0.094rem
space-2	2px	0.125rem
space-2.5	2.5px	0.156rem
space-3	3px	0.188rem
space-3.5	3.5px	0.219rem
space-4	4px	0.250rem
space-5	5px	0.313rem
space-6	6px	0.375rem
space-7	7px	0.438rem

Generated Code

:root {
  --space-0: 0px;
  --space-0.5: 0.5px;
  --space-1: 1px;
  --space-1.5: 1.5px;
  --space-2: 2px;
  --space-2.5: 2.5px;
  --space-3: 3px;
  --space-3.5: 3.5px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
}