Gerador CSS clamp()
Gere um valor clamp() CSS fluído que escala uniformemente entre duas larguras de viewport.
Gerador CSS clamp()
A tipografia fluida e espaçamento dimensionam um valor suavemente enquanto a viewport redimensiona, em vez de saltar entre tamanhos fixos em alguns poucos breakpoints de media query. Esta ferramenta constrói esse valor para você: insira um tamanho mínimo e máximo e as larguras de viewport em que se aplicam, e ela retorna uma função CSS clamp() com uma interpolação linear entre eles, pronto para colar em uma folha de estilos.
O tamanho mínimo e máximo definem as duas extremidades da escala; a largura mínima e máxima da viewport definem onde cada extremidade entra em vigor — abaixo da largura mínima o valor fica no seu mínimo, acima do máximo ele fica no seu máximo, e entre eles cresce linearmente com a viewport. A unidade alterna a saída entre px e rem, com o tamanho da fonte raiz controlando a conversão px-para-rem, e as casas decimais controlam a precisão dos números gerados. O formato de saída envolve o mesmo clamp() como uma declaração simples, uma propriedade CSS customizada, ou uma classe arbitrary-value do Tailwind, para que você possa colá-lo diretamente em qualquer base de código em que estiver trabalhando.
Ativar a verificação de acessibilidade adiciona uma nota quando a configuração poderia causar problemas: o dimensionamento baseado em px ignora a preferência de tamanho de fonte do navegador do leitor, e um mínimo muito pequeno permanece difícil de ler mesmo antes de começar a escalar. Ambos são erros comuns em fórmulas de tipo fluído escritas manualmente, e a ferramenta os sinaliza em vez de enviá-los silenciosamente.
Tudo é calculado no seu navegador enquanto você ajusta as opções — nada do que você insere é enviado para lugar nenhum. Quando o resultado parecer certo, copie-o, baixe-o como um arquivo .txt, ou envie-o para a entrada de outra ferramenta para continuar trabalhando.