Generador de degradats CSS

Els tres tipus de degradat

• linear-gradient(): els colors avancen en línia recta. L'angle marca la direcció: 180deg va de dalt a baix (és el valor per defecte) i 90deg d'esquerra a dreta.
• radial-gradient(): els colors surten d'un punt cap a fora, en cercle o en el·lipse. Útil per a brillantors i vinyetes.
• conic-gradient(): els colors giren al voltant d'un centre, com una ruleta. Serveix per a gràfics de pastís, rodes de color i fons amb efecte metàl·lic.

Parades de color

Cada parada és un color i una posició: #2563eb 0%, #db2777 100%. Si dues parades comparteixen posició, el canvi és brusc en lloc de gradual, i així es fan les ratlles:

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

Un degradat damunt d'una imatge

Perquè un titular es llegeixi sobre una foto, posa-hi al davant un degradat de negre transparent a negre semiopac. En CSS les capes de background se separen amb comes i la primera queda a sobre:

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

Per maquetar-ho abans de tenir la foto, en serveix una de ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Consells

• Entre dos colors molt diferents (blau i groc, per exemple) el centre pot quedar grisós. Afegeix una parada intermèdia o interpola en un altre espai de color: linear-gradient(in oklch 90deg, …), compatible amb els navegadors actuals.
• Per a un degradat al text, combina background-clip: text amb color: transparent.
• Les versions repeating-linear-gradient() i similars repeteixen el patró: perfectes per a ratlles i quadrícules sense imatges.