Design Tools
Gerador de Escala de Espaçamento
Gere sistemas de espaçamento consistentes para seu design
Predefinições
4px
12
Visualização Visual
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
Tabela de Escala
| Nome | px | rem | Variável |
|---|---|---|---|
| 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;
}
Por que usar Gerador de Escala de Espaçamento?
- ✓100% Grátis - Sem custos ocultos ou recursos premium
- ✓Sem cadastro - Use instantaneamente sem criar conta
- ✓Privacidade em primeiro lugar - Todo processamento acontece no seu navegador. Seus dados nunca saem do seu dispositivo
- ✓Ultra rápido - Resultados instantâneos sem atrasos de servidor
Como Usar
- Digite ou cole seu texto na área de entrada acima
- A ferramenta processará sua entrada automaticamente
- Copie o resultado ou baixe como arquivo
Recursos
- ✓Multiple scale types (linear, geometric, fibonacci)
- ✓Base size configuration
- ✓Custom step count
- ✓Visual spacing preview
- ✓CSS, SCSS, and Tailwind output
- ✓Design system presets
Perguntas Frequentes
Which spacing scale should I use?
Linear scales are simple, geometric scales grow exponentially, and Fibonacci scales follow natural proportions.