Generador de CSS Clamp()
Genera valores CSS fluidos y responsivos con clamp(). Escala suavemente entre tamaños mínimo y máximo a lo largo de los rangos del viewport.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Cómo usar esta herramienta
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
¿Qué es el Generador de CSS Clamp()?
La función CSS clamp(mín, preferido, máx) mantiene un valor acotado a la vez que le permite escalar de forma fluida dentro del rango. Perfecta para tipografía responsiva que crece suavemente con el ancho del viewport en lugar de saltar en los puntos de ruptura. Esta herramienta calcula la fórmula correcta del valor preferido a partir de tus tamaños de fuente mínimo/máximo y los anchos del viewport.
Casos de uso comunes
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
Preguntas frecuentes
¿Compatibilidad con navegadores?▼
Herramientas relacionadas
Conversor de Color (HEX/RGB/HSL)
Convierte colores entre los formatos HEX, RGB y HSL. Elige un color visualmente o introduce los valores manualmente.
Generador de Box Shadow CSS
Crea valores de box-shadow en CSS de forma visual. Previsualiza en tiempo real y copia el CSS generado.
Generador de Degradados CSS
Crea degradados CSS lineales y radiales. Elige los colores de forma visual y copia el CSS generado.
Generador de Curvas de Aceleración Cubic Bezier
Crea curvas de aceleración cubic-bezier para CSS. Incluye ajustes preestablecidos estándar.
Generador de Paletas de Color
Genera paletas de color armoniosas a partir de cualquier color base. Admite esquemas complementarios, análogos, triádicos y monocromáticos.
Generador de Border Radius CSS
Crea valores complejos de border-radius en CSS de forma visual. Control independiente de cada esquina.