Gerador de clamp()
Gere font-size fluido com CSS clamp() — defina os limites de largura da tela e a faixa de tamanho da fonte e receba o resultado na hora
Parâmetros
CSS gerado
Função SCSS
Parâmetros em px, retorna clamp em rem + vw
Chamada com os valores atuais
Como o gerador de clamp() funciona
Gere valores fluidos de CSS clamp() para tipografia e espaçamentos responsivos. Defina os limites de largura da tela e a faixa de tamanhos e receba o resultado na hora.
Tipografia fluida
Gere valores de font-size que escalam suavemente entre um mínimo e um máximo conforme a largura da tela muda. Sem breakpoints nem media queries — só um valor de CSS clamp().
Limites de largura da tela
Defina a faixa de largura da tela em que a escala acontece. Abaixo do mínimo, a fonte fica no menor tamanho; acima do máximo, no maior. Entre os dois, ela escala de forma linear.
Controle preciso
Digite valores exatos em pixels ou rem para o tamanho mínimo e máximo da fonte. A ferramenta calcula o valor preferido com uma equação linear que relaciona a largura da tela ao tamanho da fonte.
Copie e use
Copie o valor de clamp() gerado como CSS ou SCSS. O resultado é uma única linha que você pode colar em qualquer propriedade font-size, padding, margin ou gap.
Perguntas frequentes
clamp(min, preferred, max) é uma função CSS que limita um valor entre um mínimo e um máximo. O valor preferido — geralmente relativo à largura da tela — escala livremente dentro desses limites. O uso mais comum é em tipografia fluida.
Media queries criam saltos bruscos de tamanho em breakpoints específicos. O clamp() oferece uma escala contínua e suave. Isso reduz a complexidade do CSS e deixa o comportamento responsivo mais natural.
Sim. O clamp() funciona em qualquer propriedade CSS que aceite um comprimento — padding, margin, gap, width e outras. Espaçamentos fluidos criam layouts mais harmoniosos, que se adaptam naturalmente ao tamanho da tela.
O valor preferido usa uma fórmula como calc(Xrem + Yvw), em que X é a base e Y, a taxa de variação. Esta ferramenta calcula os dois valores a partir dos seus dados, para o tamanho da fonte escalar de forma linear entre as larguras mínima e máxima de tela que você definiu.