Generador de CSS Clamp
Genera un valor clamp() de CSS fluido y responsive a partir de un tamaño mínimo y máximo y sus viewports, con unidades px o rem y una vista previa en vivo de la fórmula.
Crea un valor clamp() de CSS fluido y responsive en segundos con este generador de CSS clamp gratuito. Introduce un tamaño mínimo en una viewport pequeña y un tamaño máximo en una viewport grande, elige px o rem, y la herramienta calcula la fórmula lineal para que tus tamaños de fuente, espaciados y anchos escalen de forma suave entre los breakpoints, sin necesidad de media queries. Copia una regla clamp() lista para pegar, todo calculado directamente en tu navegador.
¿Qué es un generador de CSS clamp?
Un generador de CSS clamp construye la función clamp() para un dimensionamiento fluido y responsive. clamp() recibe tres valores —un mínimo, un valor preferido y un máximo— y el navegador usa el valor preferido siempre que se mantenga entre los límites. La parte complicada es el valor preferido, que mezcla una cantidad fija con una cantidad relativa a la viewport en vw. Esta herramienta calcula esa fórmula por ti a partir de dos pares de tamaño y viewport, de modo que el resultado escala linealmente entre los breakpoints elegidos y luego se fija en los límites.
Cómo generar un valor clamp()
Describe los tamaños más pequeño y más grande que quieres y los anchos de viewport en los que debe aplicarse cada uno. El generador completa el resto y se actualiza en vivo.
- Elige px o rem y define el tamaño de fuente raíz si usas rem.
- Introduce el tamaño mínimo y el ancho de viewport en el que debe aplicarse.
- Introduce el tamaño máximo y el ancho de viewport en el que debe aplicarse.
- Lee la línea de vista previa en vivo para confirmar cómo escala el valor.
- Haz clic en Copiar CSS para obtener la regla clamp() lista para pegar.
¿Por qué usar este generador de CSS clamp?
- Calcula por ti el valor preferido exacto (constante + vw), sin cuentas manuales.
- Funciona en px o rem y convierte con precisión usando tu tamaño de fuente raíz.
- Genera una única regla clamp() que reemplaza pilas de media queries.
- La vista previa en vivo explica cómo escala el valor entre viewports.
- Ideal para tipografía fluida, espaciados, gaps y anchos de contenedor.
- 100% gratuito y privado: todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Qué hace clamp() en CSS?
clamp(mín, preferido, máx) devuelve el valor preferido mientras se mantenga entre el mínimo y el máximo. Por debajo de la viewport menor se queda en el mínimo, por encima de la viewport mayor se queda en el máximo, y en medio escala de forma suave. Es la manera más limpia de hacer que un valor sea fluido sin media queries.
¿Cómo se calcula el valor preferido?
El generador encuentra la recta que pasa por tus dos puntos de tamaño y viewport. La pendiente se convierte en un valor en vw (porque 1vw es el 1% del ancho de la viewport) y el resto se convierte en un desplazamiento fijo, dando un valor preferido como 1rem + 2.5vw que alcanza tu mínimo en la viewport pequeña y tu máximo en la grande.
¿Debo usar px o rem en clamp()?
rem suele ser lo mejor para los tamaños de fuente porque respeta la configuración de tamaño de fuente del navegador del usuario, lo que ayuda a la accesibilidad. px va bien para espaciados fijos o bordes. Esta herramienta te permite cambiar de unidad y usa tu tamaño de fuente raíz para convertir entre ellas con precisión.
¿clamp() reemplaza las media queries?
Para un único valor que debe escalar con la viewport —como el tamaño de un título, el padding de una sección o el gap de una cuadrícula— clamp() reemplaza una cadena de ajustes por breakpoint con una sola línea. Es posible que aún quieras media queries para cambios de diseño, como pasar de una columna a dos.