Generador de degradado CSS
Elige dos colores, escoge un degradado lineal o radial, y ajusta el ángulo para ver una vista previa en vivo. El código CSS correspondiente se genera al instante y está listo para copiarlo directamente en tu hoja de estilos.
background: linear-gradient(90deg, #ff9a00, #60acfc);Cómo funciona
Elige tus dos colores con los selectores, escoge «lineal» o «radial», y para los degradados lineales arrastra el control de ángulo. La vista previa y el código CSS de abajo se actualizan al instante con cada cambio.
Consejo
Un ángulo de 90deg va de izquierda a derecha, 180deg de arriba a abajo, y 0deg de abajo a arriba — prueba el control deslizante para ver cómo cambia la dirección del degradado.
¿Cuál es la diferencia entre lineal y radial?
Un degradado lineal transiciona a lo largo de una línea recta según el ángulo elegido. Un degradado radial se extiende en círculo desde el centro hacia afuera, sin importar el ángulo.
Más herramientas en esta categoría
Calculadora de exposición
Encuentra exposiciones fotográficas equivalentes entre apertura, velocidad de obturación e ISO.
Calculadora de relación de aspecto
Escala una imagen o vídeo de forma proporcional y encuentra su relación simplificada.
Verificador de contraste
Comprueba si un color de primer plano y de fondo cumplen las pautas de contraste WCAG.
Generador de paletas de colores
Convierte cualquier color base en paletas complementarias, análogas y triádicas.
Conversor de formatos de color
Convierte cualquier color entre HEX, RGB, HSL y CMYK al instante, con copia con un clic para cada formato.
Generador de escala tipográfica
Genera un conjunto armonioso de tamaños de fuente a partir de un tamaño base y una proporción de escala, listo para copiar como propiedades personalizadas CSS.