Para que serve o calc() no CSS
calc() permite fazer contas com unidades diferentes no próprio CSS: 100% menos a largura de uma barra lateral, 100vh menos a altura do cabeçalho, 1rem mais 2vw. O navegador resolve a expressão no momento da renderização, com os valores reais de cada elemento, algo que nenhum pré-processador consegue fazer antes.
Neste gerador você monta a expressão juntando termos (um valor com unidade: px, rem, em, %, vw, vh, vmin, vmax ou ch) e operadores (+, −, × e ÷). A ferramenta valida as regras que mais causam erro: espaços obrigatórios ao redor de + e −, e multiplicação e divisão com pelo menos um número sem unidade. Se algo estiver errado, você vê o motivo antes de colar o código.
Para saber o que a expressão realmente significa, defina um contexto: largura do elemento pai, tamanho do viewport, tamanho da fonte raiz e da fonte do elemento. Escolha também a propriedade CSS (width, height, margin, padding, font-size, top...), porque a porcentagem se refere a medidas diferentes em cada uma. O gerador mostra então o resultado calculado em px.
Há predefinições para os casos mais comuns: largura total menos barra lateral, coluna centralizada, altura total menos cabeçalho e padding fluido. O gerador roda no seu navegador e é gratuito, sem limites: monte e copie quantas expressões quiser, sem precisar do Pro.
Como montar uma expressão calc()
- Comece por uma predefinição ou adicione termos com valor e unidade.
- Escolha os operadores entre os termos (+, −, × ou ÷).
- Defina o contexto: largura do pai, viewport e tamanhos de fonte raiz e do elemento.
- Escolha a propriedade CSS e confira a validação e o resultado em px.
- Copie a expressão calc().
Onde usar calc()
- Conteúdo com largura total menos uma barra lateral fixa.
- Área principal com altura da tela menos o cabeçalho.
- Colunas centralizadas com margens mínimas.
- Padding fluido somando rem e vw.
- Posicionar elementos com top ou left relativos e um ajuste fixo.
- Conferir quanto uma expressão vale em uma tela específica.
As regras do calc() que mais geram erro
- Espaços ao redor de + e − são obrigatórios: calc(100% - 20px) funciona, calc(100%-20px) não.
- Em * e /, pelo menos um lado precisa ser um número sem unidade: calc(2 * 1rem) é válido, calc(2px * 1rem) não.
- Na divisão, o divisor é sempre sem unidade e diferente de zero: calc(100% / 3).
- A porcentagem depende da propriedade: em width é a largura do pai, em height a altura do pai, em font-size a fonte do pai.
- É possível aninhar parênteses: calc((100% - 2rem) / 3).
- em depende da fonte do elemento; em font-size, depende da fonte do pai.
Perguntas Frequentes
O gerador de calc é grátis?
Sim. Os geradores de CSS são gratuitos e sem limites, sem precisar do Pro.
Por que meu calc() não funciona?
A causa mais comum é a falta de espaços ao redor de + ou −, ou uma multiplicação entre dois valores com unidade. O gerador valida essas regras e mostra o problema.
O resultado em px é exato?
É exato para o contexto que você definiu (largura do pai, viewport e fontes). No site real, o valor muda conforme esses tamanhos.
Qual a diferença entre calc() e clamp()?
calc() faz uma conta. clamp() limita um valor entre um mínimo e um máximo, e o valor do meio pode conter uma conta. Para tipografia fluida, use o gerador de clamp().
Posso usar variáveis CSS dentro do calc()?
Sim, no seu CSS calc(var(--x) * 2) funciona. O gerador trabalha com valores concretos para poder calcular o resultado.