Generador de CSS
Crea expresiones CSS clamp(), degradados lineales, declaraciones box-shadow y valores de border-radius listos para copiar.
Entradas
Salida
Use this clamp() value in CSS font-size, spacing, or layout rules.
Cómo generar valores CSS clamp()
Crea una expresión CSS clamp() fluida a partir de tamaños mínimo y máximo y anchos de viewport.
Cómo usarlo
- Ingresa el tamaño mínimo y máximo en píxeles.
- Ingresa el rango de viewport en el que el valor debe escalar.
- Copia el valor clamp() generado en tu CSS.
Dónde ayuda clamp()
CSS clamp() es útil para tipografía fluida, espaciado y valores de diseño que deben crecer con el viewport pero mantenerse dentro de límites legibles.
Consejos de implementación
- Prueba el valor en anchos de viewport pequeños y grandes.
- Usa valores de viewport mínimo y máximo consistentes en todo un sistema de diseño.
- Combina clamp() con decisiones de line-height y espaciado para diseños legibles.
Notas sobre la fórmula
El valor clamp() generado interpola entre los anchos de viewport que elegiste. Pruébalo junto con la escala de tipografía y espaciado de tu sistema de diseño.
Preguntas frecuentes
¿Por qué la salida usa rem y vw?
rem mantiene el mínimo y el máximo ligados al tamaño de fuente raíz, mientras que vw permite que el valor intermedio escale con el ancho del viewport.
¿Puedo usarlo para espaciado?
Sí. El valor generado puede usarse para font-size, margin, padding, gap u otras propiedades de longitud.
¿clamp() necesita JavaScript?
No. clamp() es CSS puro y funciona directamente en las hojas de estilo.
Herramientas relacionadas
Verificador de Contraste
Verifica el contraste entre frente y fondo para trabajo de interfaz.
DisponibleCalculadora de Relación de Aspecto
Calcula el ancho o alto proporcional para medios e interfaces.
DisponibleExtractor de Paleta de Colores
Extrae colores dominantes en HEX y RGB de una imagen.