Xerador de degradados CSS

Os tres tipos de degradado

• linear-gradient(): as cores avanzan en liña recta. O ángulo marca a dirección: 180deg vai de arriba abaixo (é o valor por defecto) e 90deg de esquerda a dereita.
• radial-gradient(): as cores saen dun punto cara a fóra, en círculo ou en elipse. Útil para brillos e viñetas.
• conic-gradient(): as cores xiran arredor dun centro, coma unha roleta. Serve para gráficos de torta, rodas de cor e fondos con efecto metálico.

Paradas de cor

Cada parada é unha cor e unha posición: #2563eb 0%, #db2777 100%. Se dúas paradas comparten posición, o cambio é brusco en vez de gradual, e así se fan as raias:

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

Un degradado enriba dunha imaxe

Para que un titular se lea sobre unha foto, pon diante un degradado de negro transparente a negro semiopaco. En CSS as capas de background sepáranse con comas e a primeira queda enriba:

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

Para maquetalo antes de ter a foto, serve unha de ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Consellos

• Entre dúas cores moi distintas (azul e amarelo, por exemplo) o centro pode quedar agrisado. Engade unha parada intermedia ou interpola noutro espazo de cor: linear-gradient(in oklch 90deg, …), compatible cos navegadores actuais.
• Para un degradado no texto, combina background-clip: text con color: transparent.
• As versións repeating-linear-gradient() e similares repiten o patrón: perfectas para raias e grellas sen imaxes.