Gerador de CSS Clamp

Gere um valor clamp() fluido e responsivo em CSS a partir de um tamanho mínimo e máximo e suas viewports, com unidades px ou rem e prévia ao vivo da fórmula.

px 

  

  

  
  

    
    
  



    

    

      
Crie um valor clamp() fluido e responsivo em segundos com este gerador de CSS clamp gratuito. Informe um tamanho mínimo em uma viewport pequena e um tamanho máximo em uma viewport grande, escolha px ou rem, e a ferramenta calcula a fórmula linear para que seus tamanhos de fonte, espaçamentos e larguras escalem suavemente entre os breakpoints — sem precisar de media queries. Copie uma regra clamp() pronta para colar, tudo calculado direto no seu navegador.

      

        
O que é um gerador de CSS clamp?

        
Um gerador de CSS clamp monta a função clamp() para dimensionamento fluido e responsivo. clamp() recebe três valores — um mínimo, um valor preferencial e um máximo — e o navegador usa o valor preferencial enquanto ele ficar entre os limites. A parte complicada é o valor preferencial, que combina uma quantia fixa com uma quantia relativa à viewport em vw. Esta ferramenta calcula essa fórmula para você a partir de dois pares de tamanho e viewport, de modo que o resultado escala linearmente entre os breakpoints escolhidos e depois trava nos limites.

        
      

      

        
Como gerar um valor clamp()

        
Descreva os tamanhos menor e maior que deseja e as larguras de viewport em que cada um deve valer. O gerador preenche o resto e atualiza ao vivo.

        
  1. Escolha px ou rem e defina o tamanho da fonte raiz se usar rem.
  2. Informe o tamanho mínimo e a largura de viewport em que ele deve valer.
  3. Informe o tamanho máximo e a largura de viewport em que ele deve valer.
  4. Leia a linha de prévia para confirmar como o valor escala.
  5. Clique em Copiar CSS para pegar a regra clamp() pronta para colar.

      

      

        
Por que usar este gerador de CSS clamp?

        
  • Calcula o valor preferencial exato (constante + vw) para você — sem contas manuais.
  • Funciona em px ou rem e converte com precisão usando o tamanho da fonte raiz.
  • Gera uma única regra clamp() que substitui pilhas de media queries.
  • A prévia ao vivo explica como o valor escala entre as viewports.
  • Ótimo para tipografia fluida, espaçamentos, gaps e larguras de container.
  • 100% gratuito e privado — tudo roda no seu navegador.

      

      

        
Perguntas frequentes

        

          
O que o clamp() faz no CSS?

          
clamp(min, preferencial, max) retorna o valor preferencial enquanto ele permanecer entre o mínimo e o máximo. Abaixo da viewport menor ele fica no mínimo, acima da viewport maior ele fica no máximo, e entre elas escala suavemente. É a forma mais limpa de tornar um valor fluido sem media queries.

        

        

          
Como o valor preferencial é calculado?

          
O gerador encontra a reta que passa pelos seus dois pontos de tamanho e viewport. A inclinação vira um valor em vw (porque 1vw é 1% da largura da viewport) e o restante vira um deslocamento fixo, resultando em um valor preferencial como 1rem + 2.5vw que atinge seu mínimo na viewport pequena e o máximo na grande.

        

        

          
Devo usar px ou rem no clamp()?

          
rem costuma ser melhor para tamanhos de fonte porque respeita a configuração de tamanho de fonte do navegador do usuário, o que ajuda na acessibilidade. px serve bem para espaçamentos fixos ou bordas. Esta ferramenta permite alternar as unidades e usa o tamanho da fonte raiz para converter entre elas com precisão.

        

        

          
O clamp() substitui as media queries?

          
Para um único valor que deve escalar com a viewport — como o tamanho de um título, o padding de uma seção ou o gap de uma grid — o clamp() substitui uma sequência de ajustes por breakpoint por uma só linha. Você ainda pode querer media queries para mudanças de layout, como passar de uma para duas colunas.