📐Dev

Conversor de Unidades CSS

Converta entre px, em, rem, %, pt, vh, vw para valores comuns de design — base 16 px configurável. Tudo no navegador.

Fonte raiz, para rem (px) Fonte do elemento pai, para em (px)

rem é relativo ao elemento raiz e em ao elemento pai. Os dois só coincidem enquanto os dois tamanhos forem iguais.

Viewport (px)

px em rem % pt vw

Converta unidades de CSS

O CSS tem uma sopa de unidades: px, em, rem, %, pt e vw, e cada uma faz sentido num contexto diferente. Saber a quanto uma equivale na outra ajuda a montar layouts mais flexíveis. Este conversor faz essa tradução para os valores comuns de design.

As unidades relativas dependem de uma base, e aqui há duas, porque rem é relativo ao elemento raiz e em ao elemento pai — os dois só coincidem enquanto os tamanhos forem iguais, e é justamente quando deixam de ser que a conversão importa. As duas são configuráveis, junto com a largura do viewport. Daí você descobre quantos rem dão 24 px, ou como uma medida vira viewport, sem precisar fazer a divisão de cabeça a cada ajuste.

O cálculo roda no navegador. Uma referência prática para quem desenvolve web e fica transitando entre unidades fixas e relativas todo dia.

Perguntas frequentes

Cadê o campo de vh? Só encontro vw.

Só vw mesmo. Os campos de conversão são px, em, rem, %, pt e vw, mais os dois de referência: Base (px), com 16 de padrão, e Viewport (px), com 1920. Como vh depende da altura da janela e não da largura, ele precisaria de uma segunda referência e ficou de fora. Para converter uma altura, ponha a altura desejada no campo Viewport e leia o resultado de vw como se fosse vh. Unidades como ch, ex, cm e in também não estão no conjunto.

em e rem mostram sempre o mesmo número. Está certo?

Está certo dentro do modelo desta ferramenta: os dois leem o campo Base (px). No CSS real, rem se refere sempre à raiz, enquanto em se refere ao font-size do elemento pai, então os dois só coincidem quando o pai herda o tamanho da raiz. Para converter em contra um pai diferente, digamos um card com font-size de 20px, ponha 20 na Base e leia a coluna em; para voltar ao rem, devolva a Base para 16 ou para o que o seu :root declara.

Mudei a Base e os outros campos pularam. O que aconteceu?

Ao mexer em Base ou em Viewport, o recálculo parte sempre do campo px, nunca do último campo que você digitou. Se havia 2 no campo rem e a Base mudou, o px continua onde estava e o rem é reescrito a partir dele. Redigite o valor de origem depois de ajustar a referência. Os resultados saem sempre com quatro casas decimais, zeros à direita inclusive (1.0000), e o campo em que você está digitando não é reescrito enquanto isso.

Ferramentas Relacionadas

📐

Calculadora de Clamp CSS

Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.

Conversor PX ↔ REM / EM

Converta pixels para REM e EM e vice-versa com base configurável. Tabela de referência com os tamanhos mais usados em CSS. Essencial para web.

🎯

Focus-Visible CSS Snippet

Gera snippet CSS focus-visible com cor de outline customizada (WCAG 2.4.7).

🌐

HTML Preview

Escreva HTML, CSS e JavaScript e veja o resultado renderizado em tempo real. Sandbox isolado — nenhum código é enviado ao servidor.

〰️

Gerador Cubic Bezier

Crie e visualize curvas cubic-bezier para animações CSS. Arraste os pontos de controle, veja o preview da animação e copie o valor pronto. Inclui presets (ease, ease-in, ease-out). Tudo no navegador.

🔘

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.