Generador CSS clamp()
Genera un valor CSS clamp() fluido que se escala suavemente entre dos anchos de viewport.
Generador CSS clamp()
La tipografía fluida y el espaciado adaptativo permiten escalar valores suavemente conforme el viewport cambia de tamaño, en lugar de saltar entre tamaños fijos en unos pocos media queries. Esta herramienta construye ese valor para ti: ingresa un tamaño mínimo y máximo, junto con los anchos de viewport en los que aplican, y obtendrás una función CSS clamp() con una interpolación lineal en el medio, lista para pegar en tu hoja de estilos.
El tamaño mínimo y máximo definen los dos extremos de la escala; el ancho de viewport mínimo y máximo establecen dónde aplica cada extremo — por debajo del ancho mínimo el valor se mantiene en su piso, por encima del máximo en su techo, y en el medio crece linealmente con el viewport. La opción de unidad cambia la salida entre px y rem, el tamaño de fuente base controla la conversión px-a-rem, y decimales controla la precisión de los números generados. El formato de salida envuelve el clamp() como una declaración simple, una propiedad CSS personalizada, o una clase arbitraria de Tailwind, para que puedas usarla directamente en tu código.
Activar la verificación de accesibilidad añade una nota cuando la configuración podría causar problemas: el tamaño en px ignora la preferencia de tamaño de fuente del navegador del lector, y un mínimo demasiado pequeño se mantiene difícil de leer incluso antes de comenzar a escalar. Ambos son errores comunes en fórmulas de tipografía fluida escritas a mano, y la herramienta los señala en lugar de permitir que pasen silenciosamente.
Todos los cálculos ocurren en tu navegador conforme ajustas las opciones — nada de lo que ingreses se envía a ningún lugar. Cuando el resultado se vea correcto, cópialo, descárgalo como archivo .txt, o envíalo a la entrada de otra herramienta para continuar trabajando.