Generatore di gradienti CSS

I tre tipi di gradiente

• linear-gradient(): i colori avanzano in linea retta. L'angolo indica la direzione: 180deg va dall'alto in basso (è il valore predefinito) e 90deg da sinistra a destra.
• radial-gradient(): i colori si allargano da un punto verso l'esterno, a cerchio o a ellisse. Utile per bagliori e vignettature.
• conic-gradient(): i colori ruotano attorno a un centro, come una ruota. Serve per grafici a torta, ruote dei colori e sfondi con effetto metallico.

Punti di colore

Ogni punto è un colore con una posizione: #2563eb 0%, #db2777 100%. Se due punti condividono la posizione, il passaggio è netto invece che graduale: così si fanno le righe.

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

Un gradiente sopra un'immagine

Per rendere leggibile un titolo su una foto, mettici davanti un gradiente dal nero trasparente al nero semiopaco. In CSS i livelli di background si separano con virgole e il primo sta sopra:

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

Per impaginarlo prima di avere la foto, va bene una di ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Consigli

• Tra due colori molto diversi (blu e giallo, per esempio) il centro può diventare grigiastro. Aggiungi un punto intermedio o interpola in un altro spazio colore: linear-gradient(in oklch 90deg, …), supportato dai browser attuali.
• Per un gradiente sul testo, combina background-clip: text con color: transparent.
• Le versioni repeating-linear-gradient() e simili ripetono il motivo: perfette per righe e griglie senza immagini.