Spacing Scale Generator

Generate consistent spacing scales for design systems

10 values• linear scale

Configuration

Base Value (px)

Steps: 10

Scale Type

Quick Presets

Export Format

Preview & Output10 steps

Generated Scale

4px

0.25rem

8px

0.5rem

12px

0.75rem

16px

1rem

20px

1.25rem

24px

1.5rem

28px

1.75rem

32px

2rem

36px

2.25rem

40px

2.5rem

CSS Output

:root {
  --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 */
  --space-9: 36px; /* 2.25rem */
  --space-10: 40px; /* 2.5rem */
}

About Spacing Scale Generator

Generate spacing scales for design systems. Supports linear, geometric, and Fibonacci scales with export to CSS, SCSS, and Tailwind.

Color Converter
Pixel to REM Converter
Screen Density Calculator

About Spacing Scale Generator

Related Tools