Generador de degradados CSS

Un degradado ajustado a ojo y el código CSS listo para pegar

Este generador de degradados muestra el resultado en grande y escribe el código CSS mientras ajustas. Eliges el tipo («Lineal», «Radial» o «Cónico»), el ángulo y de 2 a 8 paradas de color, cada una con su posición y su opacidad. Todo se calcula en tu navegador, sin abrir un programa de diseño.

Cómo crear un degradado CSS

1. Elige el tipo. En lineal, mueve el control «Ángulo» o pulsa una flecha de «Dirección». En radial, elige la «Forma» (círculo o elipse) y la posición del centro.
2. En «Paradas de color», haz clic en la barra para añadir una parada y arrastra un tirador para moverla, con el ratón o con el dedo. Cada fila ajusta el color (selector o código HEX), la «Posición %» y la «Opacidad %». El botón × quita la parada e «Invertir el orden» da la vuelta al degradado.
3. En «Código CSS», elige el formato: background, background-image, «Clase de utilidad» o «SVG» (solo en lineal), y pulsa «Copiar el código».
4. «Descargar PNG» guarda una imagen de 1920 × 1080 px por defecto, hasta 8000 px por lado.

«Degradado al azar» (o la barra espaciadora) saca 2 o 3 colores de tonos vecinos u opuestos, y la galería trae 16 modelos. «Guardar este degradado» conserva hasta 12 en tu dispositivo; a partir de ahí, hay que borrar uno antes. La dirección de la página sigue cada ajuste: cópiala para compartir el degradado.

La sintaxis del gradiente CSS

Pulsa «Brasas» en la galería y la herramienta escribe:

background: #b3151b;

background: linear-gradient(90deg, #b3151b 0%, #ff8a1f 100%);

La primera línea es un color liso de reserva. La segunda dibuja el degradado: un ángulo y, después, las paradas, cada una con un color y una posición. En los ángulos, 0deg apunta hacia arriba, 90deg hacia la derecha y 180deg hacia abajo. Las palabras clave dicen lo mismo: to right equivale a 90deg y to bottom a 180deg.

• radial-gradient(circle at 50% 50%, #fff3b0 0%, #7a1f3d 100%) sale de un centro y se abre en círculo hasta la esquina más lejana.
• conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%) gira alrededor del centro empezando por arriba.
• Una opacidad inferior a 100 convierte el color en rgba: #b3151b al 25 % se escribe rgba(179, 21, 27, 0.25).

Franjas nítidas. Dos paradas en la misma posición eliminan la transición. linear-gradient(90deg, #2b1b5a 0%, #2b1b5a 50%, #ffd3a5 50%, #ffd3a5 100%) da dos mitades lisas con un corte limpio.

Consejos de diseño

• Tonos vecinos para un resultado suave. Dos colores cercanos en el círculo cromático se funden sin manchas.
• Cuidado con el gris entre complementarios. Entre el rojo #ff0000 y el cian #00ffff, el centro del degradado cae en un gris medio, cercano a #808080. Añade una parada intermedia con color: el modelo «De coral a turquesa» pasa por un amarillo arena al 50 %.
• Comprueba la legibilidad. La herramienta indica el contraste WCAG de un texto blanco y de uno negro sobre los dos colores extremos. En «Brasas», el blanco logra 6,90:1 sobre el rojo («Cumple AA», el umbral es 4,5:1), pero solo 2,35:1 sobre el naranja; el negro hace lo contrario: 3,03:1 y 8,90:1. Ninguno vale para todo el ancho.
• Mejor CSS que una imagen. Una línea de código pesa unas decenas de bytes y no pierde nitidez en ninguna pantalla.

Las tres funciones se pueden usar en todos los navegadores actuales sin prefijo.

Preguntas frecuentes

¿Qué diferencia hay entre background y background-image?

background es una propiedad abreviada que reinicia los demás ajustes del fondo. background-image solo toca la imagen. En ese formato, la herramienta solo escribe la línea background-color cuando todas las paradas son opacas, porque se vería a través de un degradado transparente.

¿Cómo se pone un degradado en un texto?

Aplica el degradado como fondo del texto y añade background-clip: text y color: transparent. La muestra «Texto con degradado» enseña el resultado con tus colores.

¿Cómo hago un degradado hacia transparente?

Pon el mismo color en dos paradas y baja la opacidad de una a 0. El modelo «Velo oscuro» va así de 0 a 85 %: encima de una foto, permite leer un titular blanco.

¿Mis degradados guardados se envían a algún sitio?

No. Se quedan en la memoria de tu navegador, en este dispositivo. Para tener un degradado en otro equipo, copia la dirección de la página.