Calculadora CSS clamp
Com esta calculadora CSS clamp você transforma um valor mínimo, um máximo e uma faixa de viewport na expressão clamp() pronta para fontes, espaçamentos e larguras, sem media queries.
Exemplo: Propriedade CSS: font-size · Menor valor (celular) 16 px · Maior valor (desktop) 24 px · A partir da largura do viewport 320 px · Até a largura do viewport 1.280 px · Tamanho de fonte base (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Fonte: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Atualizado em: .
Como o cálculo é feito
clamp(MIN, VAL, MAX) limita um valor por baixo e por cima. Para um texto que cresce de 16 a 24 px entre 320 px e 1280 px de largura, fica: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Como é calculado
Entre as duas larguras de viewport o valor sobe linearmente. A inclinação é (máx − mín) / (viewportmáx − viewportmín), o intercepto mín − inclinação · viewportmín. O intercepto fica em rem e a inclinação em vw, de modo que uma fonte do navegador ampliada pelo usuário continua valendo. A tabela mostra o valor em dispositivos típicos.
Bom saber
- Tamanhos de fonte só em vw, sem parte em rem, quase não ampliam com o zoom; por isso a expressão tem uma parte rem.
- clamp() também serve para padding, margin, gap e width, onde houver um comprimento.
- Todos os navegadores atuais suportam clamp() (desde 2020).
Perguntas frequentes
Como calculo clamp() para tamanhos de fonte?
Informe o tamanho mínimo e máximo em px e as larguras de viewport. A calculadora monta o valor preferido com rem e vw e o coloca entre mínimo e máximo.
Por que a expressão tem uma parte em rem?
Um valor só em vw ignora o tamanho de fonte do navegador. Com uma parte em rem, o texto continua escalando para quem usa fonte maior.
Posso usar clamp() para espaçamentos?
Sim, para qualquer propriedade CSS com valor de comprimento, como padding, margin, gap ou width.
O que significa 1.5rem no fim?
O máximo: a partir da largura superior o texto para de crescer. Com base de 16 px, 1,5 rem são exatamente 24 px.
Fontes e base legal
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (o texto deve poder ser ampliado até 200 %)
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Converter px em remConverter px em rem com seu próprio tamanho base, além de em, pt, porcentagem e vw, e uma tabela de tamanhos de fonte comuns. Grátis e sem cadastro.
- Gerador de gradiente CSSCrie gradientes CSS: lineares, radiais ou cônicos, quantas paradas de cor quiser, ângulo e cor de fallback – prévia ao vivo e CSS pronto para copiar.
- Gerador de box-shadow CSSCrie sombras CSS com controles: várias sombras, deslocamento, desfoque, expansão, cor com transparência, inset e modelos – prévia ao vivo e CSS para copiar.
- Gerador de border-radius CSSArredonde cantos com controles: todos juntos ou um a um, em px ou %, elípticos com 8 valores – forma abreviada mais curta, prévia ao vivo e CSS para copiar.
- Combinação de fontes para título e textoPares de fontes para título e texto com prévia ao vivo, CSS para copiar e disponibilidade no Windows, Mac, iPhone e Android – só fontes do sistema.
- Verificador de contraste de cores pelas WCAG 2.2Verifique o contraste entre cor do texto e do fundo: razão de contraste pelas WCAG 2.2, avaliação AA/AAA para texto normal e grande e elementos de interface.
- Qual é o meu endereço IP?Mostra na hora seu endereço IP público, detecta se é IPv4 ou IPv6 e explica a diferença. Grátis – seu IP não é armazenado.
- Gerador de CPF e CNPJ válido para testesGerador de CPF e CNPJ válido para testes, inclusive CNPJ alfanumérico, e validador de dígitos verificadores. Grátis, sem cadastro, tudo no seu navegador.
- Minificar JavaScriptMinificar JavaScript: remova comentários e espaços, reduza o código e veja a economia em bytes. No navegador, sem upload.