Design Tools
Spacing Scale Generator
Generate consistent spacing systems for your design
Presets
4px
12
Visual Preview
0
0rem
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
7
1.75rem
8
2rem
9
2.25rem
10
2.5rem
11
2.75rem
12
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;
}
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.