Playground de CSS calc()
Experimenta con expresiones CSS calc(). Mezcla unidades como px, %, rem, vw y vh. Vista previa en vivo, validación y código CSS listo para copiar. 100% en tu navegador.
Referencia
¿Qué es CSS calc()?
La función calc() de CSS permite realizar cálculos matemáticos para definir valores de propiedades. Su mayor ventaja es la capacidad de mezclar unidades diferentes, como calc(100% - 20px) o calc(50vw + 2rem).
Unidades compatibles
calc() soporta todas las unidades CSS: px, %, em, rem, vw, vh, vmin, vmax, ch, ex, y más. Se pueden usar los operadores +, -, * y /. Los operadores + y - requieren espacios a ambos lados.
Ejemplos prácticos
Ancho fluido con margen fijo: width: calc(100% - 40px). Fuente responsive: font-size: calc(1rem + 0.5vw). Centrar con offset: left: calc(50% - 150px). Altura dinámica: height: calc(100vh - 60px - 2rem).
Privacidad
Todo el procesamiento se ejecuta 100% en tu navegador. No se envían datos a ningún servidor.