Gerador de CSS Clamp
Crie uma expressão CSS clamp() a partir de tamanhos mínimos e máximos e larguras de viewport para tipografia ou espaçamento fluido.
Roda localmente no seu navegador. Seus dados nunca saem do dispositivo.
Entradas
Saída
Use este valor clamp() em font-size, espaçamento ou regras de layout CSS.
Como gerar valores CSS clamp()
Crie uma expressão CSS clamp() fluida a partir de tamanhos mínimos e máximos e larguras de viewport.
Como usar
- Informe o tamanho mínimo e máximo em pixels.
- Informe a faixa de viewport onde o valor deve escalar.
- Copie o clamp() gerado para seu CSS.
Onde clamp() ajuda
CSS clamp() é útil para tipografia fluida, espaçamentos e valores de layout que devem crescer com o viewport, mas permanecer dentro de limites legíveis.
Dicas de implementação
- Teste o valor em larguras pequenas e grandes.
- Use viewports mínimos e máximos consistentes em um design system.
- Combine clamp() com decisões de line-height e espaçamento para layouts legíveis.
Geração local
A fórmula é calculada no navegador. Nenhum valor CSS é enviado a um servidor.
Perguntas frequentes sobre CSS clamp
- Por que a saída usa rem e vw?
- rem mantém mínimo e máximo ligados ao tamanho da fonte raiz, enquanto vw permite que o valor intermediário escale com a largura da tela.
- Posso usar para espaçamento?
- Sim. O valor gerado pode ser usado em font-size, margin, padding, gap ou outras propriedades de comprimento.
- clamp() precisa de JavaScript?
- Não. clamp() é CSS puro e funciona diretamente em stylesheets.