Ferramentas de Design
Gerador de Escala de Espaçamento
Gere sistemas de espaçamento consistentes para seu design
Usar esta ferramenta agora
Uso gratuitoSem cadastroResultado imediato no navegador
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;
}
O que é Gerador de Escala de Espaçamento?
Gere sistemas de espaçamento consistentes para seu design
Gerador de Escala de Espaçamento é uma ferramenta online gratuita que funciona diretamente no seu navegador. Sem instalação ou cadastro. Todo o processamento acontece localmente no seu dispositivo, garantindo privacidade e segurança dos dados.
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.
Ferramentas Relacionadas
Gerador de Escala TipográficaGenerate harmonious typography scales for web designGerador de Paleta de CoresFree color palette generator. Create beautiful color schemes with harmony rules. Export as CSS, Tailwind, or SCSS. Perfect for web design, UI/UX, and branding.Gerador de Paleta de CoresFree color palette generator. Create beautiful color schemes with harmony rules. Export as CSS, Tailwind, or SCSS. Perfect for web design, UI/UX, and branding.