Saltar al contenido principal
LibraTool logoLibraTool

Generador de clamp() para CSS gratis

Genere un valor clamp() de CSS fluido para tipografía y espaciado adaptables. Establezca el tamaño mínimo/máximo y el rango de la ventana gráfica, vea una vista previa en vivo y copie el CSS de una sola línea.

Funciona sin conexión una vez cargado
Unidad de salida:
Valor CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Clase Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px de ancho → 21.9px
Aa 22px

Tamaño renderizado en distintas ventanas gráficas

375px de anchoAa 16px
908px de anchoAa 24px
1440px de anchoAa 32px

clamp(min, preferred, max) escala un valor de forma fluida con la ventana gráfica y lo bloquea en el mínimo y el máximo. Reemplaza múltiples media queries para tipografía, espaciado y anchos con una sola línea.

Usos habituales

  • Crea Tipografía Responsiva FluidaEscala tamaños de fuente suavemente entre móvil y escritorio con una línea.
  • Márgenes y Relleno FluidosHaz que el espaciado de sección crezca con la ventana gráfica en lugar de saltar en puntos de ruptura.
  • Reemplaza Consultas de Medios con clamp()Colapsa pilas de anulaciones de punto de ruptura en un solo valor fluido.
  • Construye una Escala de Tipo FluidaGenera pasos de clamp() consistentes para una escala de tipo de sistema de diseño.
  • Encabezados Héroes y Pantalla FluidosHaz que los grandes títulos de la página de destino se escalen dramáticamente pero seguramente.

Cómo funciona

Esta herramienta calcula valores CSS clamp() usando una fórmula de interpolación lineal escrita a mano: sin bibliotecas, sin ida y vuelta al servidor. Introduces dos tamaños y dos anchos de viewport; la matemática se ejecuta al instante en tu navegador y produce una expresión clamp() lista para pegar con un valor preferido basado en vw que escala tu tipografía o espaciado suavemente entre esos puntos de ruptura.

  1. 1
    Cálculo de pendiente lineal
    La herramienta calcula una pendiente píxel a píxel: (tamañoMáx - tamañoMín) / (viewportMáx - viewportMín). Esta pendiente se convierte luego a unidades vw multiplicándola por 100, que es el núcleo de cómo funciona el escalado relativo al viewport en CSS.
  2. 2
    Derivación de la intersección
    Se calcula un desplazamiento de intersección (en px o rem) para que la función lineal alcance exactamente tu tamaño mínimo en el viewport mínimo. Juntos, la pendiente y la intersección forman el valor preferido dentro de clamp(): la parte que realmente escala.
  3. 3
    Conversión de unidades y formato de salida
    Si eliges salida en rem, cada valor en píxeles se divide entre el tamaño de fuente raíz configurado (16px por defecto) antes de escribirse en la cadena clamp(). También se produce una clase de valor arbitrario de Tailwind equivalente, con los espacios sustituidos por guiones bajos según la sintaxis de Tailwind.
  4. 4
    Vista previa en vivo con control deslizante de viewport
    Un control deslizante de rango te permite recorrer de 320px a 1920px de ancho. En cada posición, la misma fórmula de pendiente e intersección evalúa el tamaño limitado en tiempo real y renderiza un texto de muestra en ese tamaño de píxel calculado, así puedes ver el comportamiento de escalado antes de copiar nada.

Herramientas relacionadas

🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
📐

Cuál es la resolución de mi pantalla

Ve la resolución de tu pantalla en píxeles CSS y reales, el tamaño de la ventana, la proporción de píxeles, la profundidad de color, HDR, compatibilidad táctil y frecuencia de actualización, y cópialo todo.

Probar
Tendencia
✍️

Creador de firmas

Dibuja una firma con el ratón, el dedo o un lápiz óptico, o escribe tu nombre con una fuente manuscrita, y luego expórtala como PNG o SVG transparente.

Probar

Preguntas frecuentes