Generador de degradados CSS

Los tres tipos de degradado

• linear-gradient(): los colores avanzan en línea recta. El ángulo marca la dirección: 180deg va de arriba abajo (es el valor por defecto) y 90deg de izquierda a derecha.
• radial-gradient(): los colores salen de un punto hacia fuera, en círculo o en elipse. Útil para brillos y viñetas.
• conic-gradient(): los colores giran alrededor de un centro, como una ruleta. Sirve para gráficos de tarta, ruedas de color y fondos con efecto metálico.

Paradas de color

Cada parada es un color y una posición: #2563eb 0%, #db2777 100%. Si dos paradas comparten posición, el cambio es brusco en vez de gradual, y así se hacen las rayas:

background: linear-gradient(90deg, #2563eb 50%, #db2777 50%);

Un degradado encima de una imagen

Para que un titular se lea sobre una foto, pon delante un degradado de negro transparente a negro semiopaco. En CSS las capas de background se separan con comas y la primera queda encima:

.hero {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%),
    url("foto.jpg") center / cover;
}

Para maquetarlo antes de tener la foto, sirve una de ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Consejos

• Entre dos colores muy distintos (azul y amarillo, por ejemplo) el centro puede quedar grisáceo. Añade una parada intermedia o interpola en otro espacio de color: linear-gradient(in oklch 90deg, …), compatible con los navegadores actuales.
• Para un degradado en el texto, combina background-clip: text con color: transparent.
• Las versiones repeating-linear-gradient() y similares repiten el patrón: perfectas para rayas y cuadrículas sin imágenes.