Calculadora de clamp() CSS

Esta calculadora de clamp en CSS genera valores precisos de clamp() que se adaptan de forma fluida al tamaño de la pantalla, sin tener que adivinarlos.

Última actualización: 23 de septiembre de 2026

Pega el resultado directamente en tu hoja de estilo. Maneja las matemáticas: pendiente, intercepción, escala de ventana gráfica. Tú defines los límites; construye la expresión.

Qué hace:

• Genera clamp(min, preferred, max) con resaltado de sintaxis completo

• Genera una expresión max()/min() equivalente, útil para Safari 11.1 a 13.0, que admitía min() y max() antes de clamp()

• Convierte entre px y rem automáticamente, respetando el tamaño de fuente raíz

• Muestra valores exactos en cada punto de interrupción principal (320 px → 1920 px)

• Representa un gráfico de curva de valor en vivo para que pueda ver visualmente la transición fluida

• Incluye 8 ajustes preestablecidos (Cuerpo, H1–H3, Título, Espacio S/M/L) para puntos de inicio instantáneos

Por qué es importante:

La tipografía fluida y el espaciado realizados manualmente son propensos a errores. Una fórmula, bloqueada. La calculadora valida tus entradas, advierte sobre rangos invertidos y le permite copiar la declaración de propiedad o el valor sin procesar con un solo clic.

Funciona completamente en el navegador. Sin paso de construcción, sin cuentas.

¿Qué es la clamp CSS?

CSS clamp es una función matemática nativa CSS (EN) que restringe un valor entre un mínimo y un máximo establecidos, con un valor medio fluido que escala con la ventana (EN).

Se necesitan tres argumentos: clamp(MIN, PREFERRED, MAX).

El navegador elige el valor preferido hasta que alcanza cualquiera de los límites. Por debajo del mínimo, el mínimo gana. Por encima del máximo, el máximo toma el control.

No se necesitan consultas de medios (EN). Una línea de CSS maneja el rango completo.

¿Cómo funciona la calculadora de clamp CSS?

Ingresa tu valor mínimo, valor máximo y puntos de interrupción de la ventana gráfica. La calculadora genera instantáneamente una declaración clamp() lista para copiar.

La mayoría de la gente evita hacer esto a mano. Las matemáticas implican interpolación lineal y cálculos de pendiente de vw, y es complicado hacerlo bien sin una herramienta.

Entradas que necesita la calculadora

• Valor mínimo: el más pequeño que debe ser la propiedad (px o rem)

• Valor máximo: el límite superior

• Ancho mínimo de ventana gráfica: donde comienza la escala

• Ancho máximo de ventana gráfica: donde se detiene la escala

Lo que produce la calculadora

Una declaración clamp() completa con el argumento medio correcto basado en vw.

También muestra la pendiente calculada y la intersección convertida rem, útil si estás construyendo un sistema de diseño y necesitas rastrear de dónde viene cada valor.

Las matemáticas detrás del resultado

La calculadora usa una fórmula de interpolación lineal para encontrar dos cosas: la pendiente (en vw) y la intersección (en rem).

Pendiente = (maxValue − minValue) / (maxViewport − minViewport)

Esa pendiente se convierte en la porción vw del argumento preferido. La intersección desplaza la línea para que pase por los puntos mínimo y máximo en los anchos de ventana correctos.

Con los valores predeterminados (16 px a 24 px entre ventanas gráficas de 320 px y 1440 px), la pendiente es 8 ÷ 1120 = 0.00714, o 0,7143 vw, y la intersección es 16 − 0.00714 × 320 = 13,71 px (0,8571 rem). El resultado es clamp(1rem, 0.7143vw + 0.8571rem, 1.5rem).

¿Qué es una calculadora de clamp CSS?

Una calculadora de clamp CSS es una utilidad basada en navegador que convierte un tamaño mínimo, un tamaño máximo y dos anchos de ventana gráfica en una única declaración clamp() lista para pegar.

Existe para eliminar las matemáticas manuales detrás del tamaño de fluido en CSS (EN), el lenguaje que controla cómo se representan el texto y el espaciado en todos los dispositivos.

La herramienta en sí no forma parte de ningún navegador ni especificación. Se encuentra encima de una función nativa que ya se incluye en todos los motores de renderizado modernos.

Dos cosas separadas:

• La calculadora: una página con campos de entrada y una cadena de salida generada
• La función clamp(): la sintaxis CSS real que la calculadora escribe por usted

Herramientas como Utopia.fyi llevaron esto más allá y generaron una escala de tipo de fluido completa en lugar de un valor aislado.

Escribe un rango de tamaño de fuente en una de estas herramientas y volverá a trabajar con CSS en segundos, sin necesidad de realizar cálculos de pendiente a mano.

CSS Sintaxis de la función clamp() y parámetros requeridos

La función clamp() toma exactamente tres argumentos separados por comas, en un orden fijo: mínimo, preferido, máximo.

• Valor mínimo: el mínimo, utilizado siempre que el valor preferido caiga por debajo de él
• Valor preferido: el valor que el navegador intenta utilizar, normalmente una expresión basada en ventana gráfica
• Valor máximo: el techo, utilizado siempre que el valor preferido supere este

Cada argumento puede ser una longitud, un porcentaje u otra función matemática como calc(), min() o max().

Establecer el mínimo por encima del máximo es un error de redacción común. Según la especificación, el mínimo gana y el máximo se ignora, lo que parece una función rota cuando el verdadero problema es el orden de los argumentos.

Una vez generada, la cadena cae directamente en un valor de propiedad de la misma manera que lo haría cualquier otro tamaño, por ejemplo font-size: clamp(1rem, 2.5vw, 2rem);

Cómo la fórmula de clamp calcula el valor preferido

El valor preferido dentro de clamp() es casi siempre un pequeño problema de interpolación lineal, dos puntos conectados por una línea recta.

Una calculadora ejecuta esto automáticamente usando los dos anchos de viewport (EN) suministrados, para que nadie tenga que calcular la pendiente a mano cada vez que cambia un diseño.

Calcular la pendiente entre el mínimo y el máximo

La pendiente es la tasa de cambio entre el tamaño más pequeño en el ancho de ventana más pequeño y el tamaño más grande en el ancho de ventana más grande.

Las entradas necesarias:

• Tamaño de fuente mínimo, en el ancho mínimo de la ventana gráfica
• Tamaño máximo de fuente, en el ancho máximo de la ventana gráfica
• Ancho mínimo de la ventana gráfica
• Ancho máximo de ventana gráfica

Resta los dos tamaños, resta los dos anchos y luego divide el primer resultado por el segundo. Ese número se convierte en el multiplicador adjunto a la unidad de ventana gráfica en la declaración final.

Convertir la pendiente en una expresión calc()

El valor de la pendiente nunca está solo. Se multiplica por una unidad de ventana gráfica y se suma a un desplazamiento fijo rem.

Ese desplazamiento fijo es la intersección y, el valor que alcanzaría la línea con un ancho de ventana gráfica cero, aunque ningún navegador real renderice con ese ancho.

Un resultado típico es calc(1rem + 1.5vw), la mitad fluida de la declaración de clamp().

Los navegadores resuelven esa expresión en cada redistribución en lugar de una vez al cargar la página, razón por la cual el texto sigue escalando a medida que cambia el tamaño de la ventana.

Unidades que una calculadora de clamp CSS admite: px, rem, em y vw

La mayoría de las calculadoras aceptan px como entrada y lo convierten silenciosamente a rem antes de ejecutar la fórmula, ya que rem es lo que realmente respeta la configuración del navegador del usuario.

Firefox ha admitido clamp() desde la versión 75, enviada en abril de 2020 (MDN (EN)), y todos los motores principales ahora tratan estas cuatro unidades de la misma manera dentro de la función.

¿Por qué rem es la unidad recomendada para el tamaño de fuente?

rem es relativo al tamaño de fuente raíz, el tamaño base establecido en el elemento html, generalmente 16px de forma predeterminada.

Cambia ese tamaño de raíz a través de la configuración del navegador y cada valor de clamp basado en rem escalará automáticamente con él.

Qué px hace diferente:

• px permanece fijo sin importar lo que cambie el usuario
• em se combina con el tamaño de fuente principal, lo que se complica dentro de los componentes anidados

La diferencia entre píxeles y rem tamaño (EN) es más importante en este lugar exacto, ya que una clamp() integrada en px excluye silenciosamente una página de ese comportamiento de escala.

Qué aporta vw a la parte fluida de la fórmula

Referencia rápida:

• 1vw equivale al 1% del ancho de la ventana gráfica
• 100vw equivale al ancho total de la ventana gráfica del navegador

vw vincula un valor al ancho de esa ventana gráfica, que es lo que le da a clamp() su escala suave y sin escalones.

Sin él, el valor preferido sería simplemente otro número fijo y la parte fluida de la fórmula desaparecería por completo.

Las calculadoras construidas alrededor de CSS unidades basadas en ventana gráfica (EN) manejan esta conversión para que nadie tenga que recordar los porcentajes matemáticos a mano.

Comparación de clamp() con calc(), min() y max()

clamp() no es realmente una cuarta función sino una abreviatura de las otras tres que trabajan juntas.

MDN documenta la relación directamente: clamp(MIN, VAL, MAX) se resuelve en max(MIN, min(VAL, MAX)), por lo que el navegador ejecuta una pequeña comparación anidada cada vez que se calcula el valor.

Usa calc() solo cuando no sea necesario limitar nada. Agregar un límite donde no se necesita ninguno solo agrega complejidad para nada.

Usa min() o max() cuando solo importa un lado del rango, por ejemplo, un ancho máximo en una imagen, sin necesidad de piso.

Cuándo utilizar Clamp() en lugar de consultas de medios

Un puñado de puntos de interrupción fijos dejan de cubrir rápidamente los anchos reales de los dispositivos. Solo los teléfonos ahora se envían en docenas de tamaños de ventanas gráficas diferentes.

Cada vez que un nuevo ancho cae entre dos puntos de interrupción, alguien tiene que agregar otra media query (EN) y probarla, que es exactamente el costo de mantenimiento que elimina la clamp().

Cuando cada enfoque gana:

• Clamp() gana por escalar un valor único sin problemas: tamaño de fuente, relleno, ancho máximo
• Las consultas de medios siguen ganando en la reestructuración del diseño: cambiar una cuadrícula de una columna a tres, ocultar una barra lateral
• Combinar ambos es normal en producción: clamp() para escalar, consultas de medios para cambios estructurales

El tutorial de tipo fluido de Andy Bell en Piccalil.li crea un sistema de tipos completo a partir de clamp() y CSS propiedades personalizadas, omitiendo por completo el tamaño de fuente basado en puntos de interrupción.

Los dos enfoques no son mutuamente excluyentes dentro de la misma hoja de estilo. La mayoría de los sitios de producción todavía se basan en patrones de diseño responsivo (EN) con puntos de interrupción para cambios de diseño, mientras permiten que clamp() maneje cualquier escala continuamente en el medio.

rem o px: elegir unidades para valores de clamp accesibles

rem es el valor predeterminado más seguro para los valores de clamp() vinculados al texto, porque responde a la configuración de tamaño de fuente del navegador del usuario y px no.

Pautas de accesibilidad al contenido web, Criterio de cumplimiento 1.4.4, requiere que el texto permanezca legible y funcional con un zoom del 200 % sin pérdida de contenido (W3C, WCAG 2.1 (EN)).

La propia documentación de clamp() de MDN refleja ese requisito directamente, recomendando que el límite máximo sea al menos el doble del mínimo siempre que clamp() controle el tamaño de fuente.

En la Encuesta de usuarios con baja visión de 2018 de WebAIM (EN), el 44.0% de los encuestados informaron que usaban controles de zoom del navegador y el 36.7% usaron configuraciones de tamaño de texto del navegador específicamente, dos mecanismos que se comportan de manera diferente según en la unidad elegida.

Elegir entre las dos unidades también es una cuestión de cumplimiento de accesibilidad web (EN), no solo de preferencia visual.

rem: Pros y contras de los valores de clamp()

Ventajas:

• Se escala con la configuración de tamaño de texto del navegador del usuario
• Cumple con las expectativas de cambio de tamaño de texto de WCAG desde el primer momento
• Mantiene una proporción constante con el tamaño de fuente raíz en toda la página.

Contras:

• Requiere verificar que el tamaño de fuente raíz no se haya restablecido mediante un reinicio CSS
• Un poco menos intuitivo para los diseñadores acostumbrados a pensar en píxeles

La mayoría de las orientaciones sobre tipografía accesible (EN) se deciden por rem como unidad predeterminada exactamente por este motivo.

px: Pros y contras de los valores de clamp()

Ventajas:

• Salida predecible píxel por píxel en todos los navegadores
• Es más fácil hacer coincidir un archivo de diseño que especifica valores de píxeles exactos

Contras:

• Ignora por completo la configuración de tamaño de texto del navegador de un usuario
• Puede fallar el requisito de cambio de tamaño del 200 % de las WCAG por sí solo
• No ofrece ninguna ventaja real sobre rem una vez que el tamaño de fuente raíz se deja en su valor predeterminado

Reserve valores de clamp() basados en px para propiedades que no sean de texto, un ancho de borde o un tamaño de icono fijo, donde la escala de accesibilidad nunca fue el objetivo.

Compatibilidad del navegador con la función clamp()

clamp() se ejecuta en todos los navegadores que aún reciben actualizaciones y lo ha hecho durante años.

Can I Use (EN) sitúa la compatibilidad global con navegadores en 96.25% a partir de agosto de 2026, combinando el uso compartido de escritorio y móvil de StatCounter GlobalStats.

Cifras clave:

• Soporte global: 96.25 % del uso del navegador rastreado (Can I Use, StatCounter GlobalStats, agosto de 2026)
• Estado de referencia: disponible en todos los navegadores desde julio de 2020, ampliamente disponible desde enero de 2023 (proyecto de características web, citado a través de MDN)
• Chrome: compatible desde la versión 79, lanzada en diciembre de 2019 (¿Puedo usarlo?)
• Safari: compatible desde la versión 13.1, lanzada en marzo de 2020 (¿Puedo usarlo?)

Edge obtuvo soporte un mes después con la versión 79 en enero de 2020, su primera versión en el mismo motor Blink que Chrome.

La brecha restante se debe casi en su totalidad a instalaciones antiguas de Android WebView y a un grupo cada vez menor de navegadores empresariales que aún están bloqueados en versiones anteriores a 2020.

Esa brecha es exactamente lo que la planificación de compatibilidad entre navegadores (EN) debe tener en cuenta en cualquier proyecto que aún admita esos entornos.

Calcular el valor de la clamp de fluido paso a paso

Una calculadora automatiza esto, pero ejecutarla manualmente una vez hace que sea más fácil confiar en la salida y depurarla más adelante.

1. Elige el tamaño de fuente mínimo y el ancho de la ventana gráfica que se aplica en
2. Elige el tamaño de fuente máximo y el ancho de la ventana gráfica que se aplica en
3. Resta los dos tamaños, resta los dos anchos, luego divide el primer resultado por el segundo para obtener la pendiente.
4. Multiplica la pendiente por 100 para convertirla en un coeficiente vw
5. Resuelva para la intersección con el eje y: tamaño mínimo menos pendiente multiplicado por el ancho mínimo
6. Reúna los tres argumentos en clamp(min, coefficient vw + intercept, max)

Verifica el resultado en ambos extremos del rango antes de enviarlo. El valor debe caer exactamente en el mínimo en el ancho más pequeño y exactamente en el máximo en el ancho más grande.

Un error común aquí es escribir el coeficiente como porcentaje. Necesita la unidad vw, como en 0.7143vw, ya que un porcentaje dentro del tamaño de fuente se resuelve con el tamaño de fuente principal, no con la ventana gráfica.

Herramientas que generan valores de sujeción automáticamente

Una calculadora guarda la aritmética. Lo que separa una herramienta de otra es lo que sucede después de que se genera el CSS.

La calculadora de escala de tipo de fluido de código abierto de Aleksandr Hovhannisyan genera un conjunto completo de variables de tamaño de fuente con nombre en lugar de un valor aislado, listo para incluirse en un sistema de diseño existente.

Los equipos que aún admiten compilaciones de navegadores más antiguas a veces agregan postcss-clamp, un complemento PostCSS que reescribe clamp() en una combinación min()/max() en el momento de la compilación en lugar de en el tiempo de ejecución. Eso solo ayuda a los navegadores que enviaron min() y max() antes de clamp(), principalmente Safari 11.1 a 13.0.

Sass nunca tuvo matemáticas fluidas nativas, por lo que en cualquier equivalente siempre había un mixin escrito a mano que hacía el mismo cálculo de pendiente que la calculadora hace automáticamente.

Cuando Clamp() no funciona o debe evitarse

clamp() no siempre es la herramienta adecuada. Algunas situaciones requieren algo completamente distinto.

Donde se queda corto:

• Los proyectos heredados aún son compatibles con Internet Explorer, que nunca recibió clamp() en ninguna versión (¿puedo usarlo?)
• Diseños que necesitan un salto brusco en un punto de interrupción específico en lugar de una escala suave, una barra lateral que debería desaparecer por completo por debajo de 768 px, por ejemplo
• Valores en los que el mínimo y el máximo se encuentran lo suficientemente juntos como para que un tamaño fijo parezca idéntico, al agregar clamp() hay complejidad sin una recompensa visible
• Propiedades en las que un archivo de diseño especifica valores de píxeles exactos sin tolerancia a la escala, como una marca de logotipo de tamaño fijo

Invertir el orden de los argumentos es el error de redacción más común, estableciendo el máximo donde pertenece el mínimo.

La declaración no dará error. Simplemente devolverá silenciosamente el número incorrecto.

Está bien mezclar unidades de longitud como px, rem y vw en los tres argumentos. Mezclar tipos incompatibles, como una longitud con un ángulo o un número sin unidades, invalida toda la declaración y el navegador la descarta sin error.

Los proyectos que no pueden eliminar por completo el soporte heredado pueden emparejar un valor fijo simple declarado primero con la línea clamp() después, de modo que los navegadores que no entienden clamp() mantienen el tamaño fijo.

Casos de uso más allá de la tipografía: espaciado, ancho y diseño con Clamp()

El tamaño de fuente es el uso más común de clamp(), pero la misma lógica de tres argumentos se aplica a cualquier propiedad CSS basada en longitud.

Espaciado fluido con clamp()

Los valores de relleno y margen se escalan exactamente de la misma manera que lo hace el tamaño de fuente, un mínimo en pantallas pequeñas, un máximo en las grandes y un valor fluido basado en vw en el medio.

Candidatos comunes:

• Relleno de sección, para que el contenido no abarrote los bordes en pantallas pequeñas ni flote de manera incómoda en las grandes
• Valores de espacio dentro de un diseño flexible o de cuadrícula
• Margen entre títulos y párrafos apilados

El cálculo de la pendiente es idéntico al utilizado para el tamaño de fuente. Solo cambian el nombre de la propiedad y los números mínimos y máximos.

Anchos de contenedor fluidos con clamp()

El ancho máximo de un contenedor puede usar clamp() para evitar que el contenido se extienda demasiado en monitores grandes y al mismo tiempo llene pantallas más pequeñas.

Un patrón típico dice ancho: clamp(320px, 90%, 1200px);, manteniendo el fluido del contenedor entre un piso duro y el techo.

Esto se superpone directamente con la forma en que un sistema de cuadrícula (EN) define sus límites exteriores, ya que ambos resuelven el mismo problema de mantener el contenido legible en anchos extremos.

Los sistemas de diseño fluido como Utopia envían sus tokens de espaciado y ancho también como expresiones de clamp(), no solo sus tamaños de fuente.

Preguntas frecuentes: Calculadora de clamp() CSS

¿Es una calculadora de clamp CSS lo mismo que la función Clamp()?

No. Una calculadora de clamp CSS es una herramienta de interfaz que genera sintaxis. clamp() en sí es la función nativa CSS, parte del CSS Módulo de Valores y Unidades, que ejecutan los navegadores. La calculadora nunca envía a producción, sólo la declaración que genera.

¿Se puede anidar Clamp() dentro de calc()?

Sí. clamp() puede ubicarse dentro de una expresión calc(), y calc() también puede ubicarse dentro de los argumentos de clamp(). El anidamiento es común cuando se combina un valor fluido vw con un desplazamiento rem fijo dentro del argumento de valor preferido de la función.

¿Clamp() funciona con CSS propiedades personalizadas?

Sí. Cualquier argumento en clamp() puede hacer referencia a una CSS propiedad personalizada en lugar de un valor literal. Los sistemas de diseño a menudo almacenan los valores mínimo, preferido y máximo como variables y luego aplican el mismo patrón de clamp () en múltiples componentes sin repetir números.

¿Puede Clamp() producir un valor negativo?

Sí, si los tres argumentos se resuelven en números negativos, clamp() devuelve un resultado negativo. Esto aparece en márgenes negativos utilizados para diseños de sangrado. Los argumentos mixtos positivos y negativos todavía se resuelven normalmente, siguiendo la misma lógica mínima, preferida y máxima.

¿Necesita una herramienta de construcción o un preprocesador para utilizar Clamp()?

No. clamp() es nativo CSS y no necesita ningún paso de Sass, PostCSS o paquete para ejecutarse en un navegador. Un preprocesador sólo resulta útil para generar escalas de fluidos completas, o como alternativa al pequeño grupo de navegadores antiguos que carecen de clamp().

¿Cómo se prueba el valor de Clamp() en diferentes tamaños de pantalla?

Cambia el tamaño de la ventana del navegador manualmente o use modo de respuesta de DevTools del navegador para arrastrar el ancho de la ventana gráfica. Comprueba que el valor se encuentre en el mínimo por debajo del punto de interrupción más pequeño y en el máximo por encima del más grande, con una escala suave en el medio.

¿Qué debe comprobar primero cuando el resultado de una calculadora de clamp CSS parece incorrecto?

La salida de una calculadora de clamp CSS parece incorrecta por una de tres razones casi siempre: orden de argumentos invertido, un ancho de ventana gráfica fuera del rango probado o un valor px sobrante que nunca se convirtió a rem.

• Confirmar el orden de los argumentos: mínimo, preferido, máximo
• Pruebe ambos extremos de la ventana gráfica, no solo el medio
• Verifica que el mínimo y el máximo usen rem, no px, cuando el valor controla el tamaño de fuente

El soporte global para clamp() se sitúa en 96.25% (¿Puedo usarlo), sin embargo, el umbral de cambio de tamaño del 200% de WCAG es una barra separada que el soporte casi universal no borra automáticamente.

Aceptar clamp() cambia el control preciso en cualquier punto de interrupción por escalamiento que nunca salta.

Un único valor fluido rara vez se utiliza de forma aislada. La mayoría de los proyectos lo amplían hasta formar una escala completa de tipografía adaptable (EN), con niveles definidos en lugar de declaraciones independientes.