Generador de degradados

Crea degradados (gradientes) lineales o radiales con los colores que quieras, ajusta el ángulo y copia el CSS listo para pegar o descarga la imagen.

Colores del degradado
Tipo
Ángulo 135°
clic para copiar

¿Qué es un degradado?

Un degradado o gradiente es una transición suave entre dos o más colores. En diseño web se usa mucho en fondos, botones y encabezados porque aporta profundidad y modernidad con muy poco código.

Degradado lineal y radial

El degradado lineal cambia de color a lo largo de una línea recta; puedes controlar su dirección con el ángulo (0° hacia arriba, 90° hacia la derecha). El radial parte de un punto central y se expande en círculo. Este generador crea ambos y te da el CSS correspondiente (linear-gradient o radial-gradient).

Cómo usarlo en CSS

Copia el código y pégalo en la propiedad background de tu elemento. Puedes añadir hasta varios colores y reordenarlos editando cada uno. Si además necesitas una paleta a juego, prueba el generador de paletas o revisa el contraste antes de poner texto encima.