Cómo funciona
Elige un tipo de degradado, un ángulo y dos o tres colores con sus posiciones. La vista previa se actualiza al instante y obtienes CSS listo para pegar, además de un PNG de 1920 × 1080 para presentaciones, fondos de pantalla y redes sociales.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Tipos de degradado
- Lineal: los colores se mezclan a lo largo de una línea recta con el ángulo que elijas (0° = de abajo arriba, 90° = de izquierda a derecha).
- Radial: los colores se expanden en círculo desde el centro.
- Cónico: los colores giran alrededor del centro, como un círculo cromático o un gráfico circular.
Consejos
- Los colores cercanos en el círculo cromático se mezclan con más suavidad que los opuestos.
- Para que el texto sobre un degradado se lea bien, comprueba el contraste en ambos extremos.
- Todos los navegadores modernos admiten estos degradados CSS sin prefijos.
Criterios y fuentes
- La sintaxis de los degradados sigue CSS Images Module Level 3 y 4 (W3C)
Última revisión 7 de octubre de 2026
Preguntas frecuentes
¿Cómo hago un degradado CSS?
Elige un tipo, ajusta el ángulo y los colores, y copia la línea «background» generada en tu hoja de estilos.
¿Qué significa el ángulo?
En los degradados lineales, 0° va de abajo arriba, 90° de izquierda a derecha y 180° de arriba abajo.
¿Puedo usar más de dos colores?
Sí. Marca «Añadir un color intermedio» para añadir una tercera parada de color con su propia posición.
¿Puedo descargar el degradado como imagen?
Sí. «Descargar PNG» guarda una imagen de 1920 × 1080 lista para presentaciones, fondos de pantalla o redes sociales.
¿Funcionan estos degradados en todos los navegadores?
Los degradados lineales y radiales funcionan en todas partes; los cónicos funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari.