CSSForge

Spacing Scale Generator

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

Scale Settings
Visual Scale
12 values · tailwind
0
0px
0.5
0.5px
1
1px
1.5
1.5px
2
2px
2.5
2.5px
3
3px
3.5
3.5px
4
4px
5
5px
6
6px
7
7px
Spacing Table
Namepxrem
space-00px0.000rem
space-0.50.5px0.031rem
space-11px0.063rem
space-1.51.5px0.094rem
space-22px0.125rem
space-2.52.5px0.156rem
space-33px0.188rem
space-3.53.5px0.219rem
space-44px0.250rem
space-55px0.313rem
space-66px0.375rem
space-77px0.438rem
Generated Code
css
: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;
}