Design Tools

Spacing Scale Generator

Generate consistent spacing systems for your design

Presets

Base Size4px

Scale Type

Steps12

Unit

Variable Prefix

Visual Preview

0rem

0.25rem

0.5rem

0.75rem

1rem

1.25rem

1.5rem

1.75rem

2rem

2.25rem

2.5rem

2.75rem

3rem

Scale Table

Name	px	rem	Variable
0	0px	0rem	--space-0
1	4px	0.25rem	--space-1
2	8px	0.5rem	--space-2
3	12px	0.75rem	--space-3
4	16px	1rem	--space-4
5	20px	1.25rem	--space-5
6	24px	1.5rem	--space-6
7	28px	1.75rem	--space-7
8	32px	2rem	--space-8
9	36px	2.25rem	--space-9
10	40px	2.5rem	--space-10
11	44px	2.75rem	--space-11
12	48px	3rem	--space-12

:root {
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
}

What is Spacing Scale Generator?

Generate consistent spacing systems for your design

Spacing Scale Generator is a free online tool that works directly in your browser. No installation or signup required. All processing happens locally on your device, ensuring your data stays private and secure.

Why Use Spacing Scale Generator?

✓100% Free - No hidden costs or premium features
✓No Signup Required - Start using instantly without creating an account
✓Privacy First - All processing happens in your browser. Your data never leaves your device
✓Lightning Fast - Instant results with no server delays

How to Use

Enter or paste your text in the input area above
The tool will automatically process your input
Copy the result or download it as a file

Features

✓Multiple scale types (linear, geometric, fibonacci)
✓Base size configuration
✓Custom step count
✓Visual spacing preview
✓CSS, SCSS, and Tailwind output
✓Design system presets

Frequently Asked Questions

Which spacing scale should I use?

Linear scales are simple, geometric scales grow exponentially, and Fibonacci scales follow natural proportions.