Generador de degradados CSS

Este generador de degradados CSS construye degradados lineales y radiales a partir de paradas de color que tú controlas, con vista previa en vivo y una declaración background lista para pegar. Arrastra las paradas por la barra, ajusta el ángulo o la forma, y el CSS se actualiza al instante.

Todo se ejecuta en tu navegador con los colores y ajustes que eliges, así que no se sube nada y puedes copiar el resultado y usarlo sin conexión.

Un degradado lineal mezcla los colores a lo largo de una línea recta, y el ángulo marca su dirección: 0 grados apunta hacia arriba, 90 grados hacia la derecha, 180 grados hacia abajo. Un degradado radial mezcla desde el centro hacia fuera, como círculo o como elipse.

Ambos son valores CSS estándar, escritos como linear-gradient() y radial-gradient(), y ambos usan la misma lista de paradas de color, así que al cambiar el tipo conservas tus colores y solo cambia cómo se extienden.

Cada parada de color es un color colocado en una posición del 0 % al 100 %. El degradado mezcla suavemente entre paradas vecinas, así que la posición de una parada controla dónde su color es más intenso y con qué rapidez se funde con el siguiente.

Añade tantas paradas como necesites para crear degradados multicolor, arrástralas para afinar la mezcla, o haz clic en la barra para soltar una parada nueva donde quieras. Dos paradas es el mínimo que necesita un degradado.

Copia el código generado y pégalo como background de cualquier elemento, por ejemplo una sección, una tarjeta o un botón. Los navegadores modernos admiten linear-gradient y radial-gradient sin prefijos, así que el valor funciona tal cual.

Como un degradado es solo un valor, también puedes usarlo en cualquier sitio donde se espere una imagen de fondo, superponerlo a un color sólido como respaldo, o reutilizar las mismas paradas en una versión lineal y otra radial para un aspecto coherente.