CSS calc() Playground
Teste e visualize expressões CSS calc() em tempo real. Misture unidades, verifique a sintaxe e copie o código CSS. Grátis, 100% no seu navegador.
Referência
O que é calc()?
A função CSS calc() permite realizar cálculos diretamente nos valores de propriedades CSS. Ela pode misturar diferentes unidades, por exemplo calc(100% - 2rem), o que é especialmente útil para layouts responsivos.
Unidades suportadas
calc() suporta todas as unidades de comprimento CSS: px, rem, em, %, vw, vh e mais. As unidades podem ser misturadas dentro de uma expressão: calc(50% + 20px - 1rem).
Exemplos práticos
Largura total menos margens: width: calc(100% - 2 * 1rem). Tipografia fluida: font-size: calc(1rem + 0.5vw). Centralização: margin-left: calc(50% - 150px). Expressões também podem ser aninhadas.
Privacidade
Todo o processamento é executado 100% no seu navegador. Nenhum dado é enviado a servidores.