Conversor de unidades CSS
Convierte tamaños de texto, bordes, radius, espacios, cajas y sombras en valores CSS listos para copiar.
Datos base
Compara unidades de longitud CSS usando tamaño raíz y viewport en el mismo panel.
Base para rem, em y %. El valor habitual del navegador suele ser 16px.
Panel de resultados
Consulta valores base, unidades relativas, viewport y unidades absolutas en una sola vista.
font-size: 0rem;Plantillas por propiedad
Cada tarjeta puede usar su propio tamaño y unidad. Si la dejas vacía, toma el valor convertido principal.
font-size: 0rem;line-height: 0;border-width: 0px;border-radius: 0rem;padding: 0rem;width: clamp(0rem, 0vw, 0rem);inset: 0rem;box-shadow: 0 0 0 currentColor;Vista previa
Compara texto, borde, radius, espacios y gap antes de pegar el CSS.
Texto base
Introduce un valor para ver la vista previa
Guía de conversión de unidades CSS
Un número en px solo tiene sentido cuando la base está clara
Este conversor toma el valor que escribes, lo pasa primero a px y después compara rem, em, %, vw, vh, vmin, vmax y unidades absolutas de CSS en la misma pantalla. También prepara declaraciones para font-size, line-height, border-width, radius, padding, gap, width y box-shadow, para que puedas revisar la base antes de pegar el código.
Empieza por el tamaño base y la unidad actual
La herramienta se actualiza en vivo. Al cambiar el tamaño de fuente base, el valor, la unidad, el viewport o la propiedad CSS, se actualizan las tarjetas de resultado, las plantillas y la vista previa sin pulsar un botón de cálculo.
- Ajusta el tamaño de fuente base al tamaño raíz de tu proyecto. 16px coincide con muchos navegadores, pero si tu sistema usa 10px o 14px, cambia primero ese valor.
- Introduce el valor y la unidad actual. Puedes partir de px, rem, em, %, vw, vh, vmin, vmax, in, cm, mm, pt o pc.
- Ajusta el ancho y alto del viewport a la pantalla que estás revisando. vw, vh, vmin y vmax dependen de esos dos datos.
- Elige la propiedad CSS y lee el panel de resultados o las plantillas. Copia la declaración cuando ya encaje con tu caso.
rem, em, %, vw y vh no miran la misma referencia
El mismo 24px puede crecer de formas distintas según la unidad elegida. Usa rem si debe seguir la escala raíz, em si depende del contexto de un componente y unidades de viewport si la ventana del navegador es la referencia.
px
Es el valor base de trabajo. La herramienta convierte cada entrada a px y después la reparte en el resto de unidades.
rem · em · %
Se calculan con el tamaño de fuente base que has indicado. En CSS real, rem mira la raíz, em mira el contexto local y % depende de la propiedad.
vw · vh · vmin · vmax
Se calculan con el ancho y alto del viewport. Conviene revisarlos en móvil, escritorio y cambios de orientación.
Unidades absolutas y aproximadas
in, cm, mm, pt y pc siguen las relaciones de longitud de CSS. ch≈ y ex≈ son aproximaciones porque cada fuente cambia.
El cálculo pasa primero por px
Sea cual sea la unidad de entrada, el valor se convierte primero a px. Después se divide por el tamaño base, el viewport o la relación de longitud absoluta de CSS. Si la base o el viewport están mal, también se desvían rem, %, vw y vh.
Con 24px el resultado se lee como font-size: 1.5rem
Con una base de 16px, introducir 24px muestra 24px, 1.5rem, 1.5em y 150%. En un viewport de 1366×900, el mismo valor aparece también como unos 1.757vw y 2.6667vh.
La vista previa sirve para orientarte
La vista previa limita tamaños demasiado pequeños o grandes para que el panel siga siendo legible. Después de copiar el CSS, pruébalo con la fuente, el elemento padre y el breakpoint reales.
Antes de pegar, revisa otra vez la referencia
La conversión da un número, pero el resultado final depende también del elemento padre, la fuente, el viewport y la referencia relativa de cada propiedad.
- em puede acumularse. En un botón dentro de una tarjeta puede ser menos predecible si cambia el tamaño de fuente del padre.
- % depende de la propiedad. 150% en font-size y 150% en width no miran el mismo elemento.
- vw y vh cambian mucho en móvil. La interfaz del navegador y la orientación alteran el viewport útil.
- Las unidades absolutas no son una regla física. Son relaciones de CSS con px; para impresión o medición física hace falta otra comprobación.
Preguntas frecuentes
¿Puedo dejar el tamaño base en 16px?
Sí, si el proyecto usa el tamaño raíz habitual del navegador. Si tu html está configurado en 10px o 14px, cambia antes la base de la herramienta para que rem y % coincidan.
¿Por qué rem y em muestran el mismo número aquí?
La herramienta calcula ambos con el tamaño base introducido para poder compararlos. En CSS real, rem depende de la raíz y em del elemento actual o de su padre.
¿Debo recalcular vw y vh si cambia el tamaño de pantalla?
Sí. vw usa el ancho del viewport y vh usa su alto, así que la sensación cambia entre móvil, escritorio y orientación.
¿Por qué ch≈ y ex≈ aparecen como aproximados?
ch y ex dependen de la fuente activa. La herramienta usa la mitad del tamaño base como referencia rápida; la comprobación final debe hacerse con la fuente real.