# Gradient overlay CSS: come colorare e scurire le immagini
[Canonical HTML page](https://gradiently.design/it/guide/css-gradient-overlay)
Mettere un gradiente sopra una foto richiede una sola riga di CSS in più. Scegliere il metodo giusto fra tre decide se l'immagine si carica in fretta, se l'overlay si può animare e se le parole sopra restano leggibili.
## The short version
- Il gradient overlay più rapido in CSS è un secondo livello di sfondo: elenca il gradiente prima di url() in background-image così sta sopra.
- Per un elemento img, metti il gradiente su uno pseudo-elemento ::before o ::after di un contenitore posizionato.
- background-blend-mode e mix-blend-mode trasformano un overlay in un lavaggio di colore che tinge l'immagine invece di coprirla.
- Le immagini hero impostate come sfondi CSS vengono scoperte più tardi degli elementi img, quindi un img con overlay di solito si carica più in fretta nella parte visibile.
- Gli overlay che devono portare testo vanno più scuri dietro le parole e trasparenti altrove, non come un velo scuro uniforme su tutta la foto.
Il più semplice **gradient overlay CSS** è uno sfondo a livelli: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. I livelli elencati per primi sono disegnati sopra, quindi il gradiente sta sopra la foto. Quando l'immagine è un elemento ``, metti invece il gradiente su uno pseudo-elemento, e quando vuoi che il colore tinga la foto invece di coprirla, aggiungi una blend mode. Ogni metodo si adatta a un lavoro diverso.
## Metodo 1: uno sfondo a livelli
`background-image` accetta un elenco separato da virgole. Il primo valore è il livello superiore. Gradienti e immagini si mescolano liberamente, e ogni livello può avere la propria dimensione e posizione se elenchi quelle proprietà nello stesso ordine. È la scelta giusta per le immagini decorative che non richiedono testo alternativo.
```css
.banner {
background-color: #0f172a; /* shows until the photo loads */
background-image:
linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
url("/images/workshop.jpg");
background-size: cover;
background-position: center;
color: #f8fafc;
}
```
Un pannello scuro a sinistra per il testo, che si schiarisce entro il 70 percento così la destra della foto resta luminosa. Il colore di riserva corrisponde all'overlay, quindi il testo si legge anche prima che arrivi l'immagine.
- Pannello laterale per il testo: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Barre in alto e in basso: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Vignettatura morbida: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Tinta diagonale del brand: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`
Quattro preset di overlay, mostrati qui sopra la pagina. Mettine uno qualsiasi davanti a `url()` nel tuo `background-image`.
Le barre in alto e in basso vanno bene per le gallerie in cui un titolo sta in alto e un credito in basso. La vignettatura porta lo sguardo verso l'interno senza reggere testo. La tinta del brand ha un grande effetto per pagine del team e banner di eventi; [gli overlay a gradiente](https://gradiently.design/it/guide/gradient-overlay) spiega quando ognuno funziona dal punto di vista del design.
## Metodo 2: uno pseudo-elemento sopra un img
Le immagini di contenuto appartengono a elementi ``: hanno testo alternativo, `srcset` responsivo, caricamento differito e scoperta anticipata da parte del browser. Un gradiente di sfondo non può stare sopra un ``, quindi avvolgilo e metti il gradiente sullo pseudo-elemento del contenitore.
```html
Harbour Days, 14 to 16 June
```
Un vero elemento immagine con un vero testo alternativo. La didascalia starà sopra l'overlay.
```css
.overlay {
position: relative;
margin: 0;
isolation: isolate;
}
.overlay img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
pointer-events: none;
transition: opacity 250ms ease-out;
}
.overlay figcaption {
position: absolute;
inset: auto 1.5rem 1.5rem;
z-index: 1;
color: #f8fafc;
}
.overlay:hover::after { opacity: 0.6; }
```
`isolation: isolate` mantiene la sovrapposizione dell'overlay dentro la figure. L'overlay può sfumare al passaggio del mouse perché è un livello a sé.
### Livello di sfondo
- Un elemento, una dichiarazione
- Nessun testo alternativo, quindi solo immagini decorative
- Scoperto tardi dal browser, il che può rallentare un hero
- L'overlay non può sfumare senza animare l'intero sfondo
### img più pseudo-elemento
- Un contenitore e qualche riga in più
- Testo alternativo corretto e `srcset` responsivo
- Scoperto presto; `fetchpriority="high"` aiuta l'immagine principale
- L'opacità dell'overlay ha transizioni economiche
Per un'immagine hero che è l'elemento più grande sullo schermo, il secondo metodo di solito vince in velocità di caricamento. [Ottimizzare le immagini per il web](https://gradiently.design/it/guide/lighthouse-image-performance) spiega perché il browser trova gli elementi `` prima degli sfondi CSS.
## Metodo 3: blend mode per i lavaggi di colore
Un overlay semplice sta sulla foto come un vetro colorato. Una blend mode fonde il gradiente con le luci e le ombre della foto stessa, e sembra più che la foto sia stata scattata in quel colore. Usa `background-blend-mode` per gli sfondi a livelli e `mix-blend-mode` su uno pseudo-elemento sopra un ``.
| Blend mode | Cosa fa | Buon overlay per |
| --- | --- | --- |
| `multiply` | Scurisce; le aree bianche prendono il colore del gradiente | Tinte ricche e cupe su foto luminose |
| `screen` | Schiarisce; le aree nere prendono il colore | Look leggeri e sbiaditi su foto scure |
| `overlay` | Aumenta il contrasto e spinge il colore nei mezzitoni | Colore del brand incisivo sui ritratti |
| `color` | Mantiene la luce della foto, sostituisce il colore | Lavaggi in stile duotone da un gradiente a due colori |
| `soft-light` | Una versione delicata di overlay | Calore o freddezza sottili |
Le cinque modalità da conoscere. `color` con un gradiente a due colori è il duotone più rapido sul web.
```css
/* Duotone wash on a layered background */
.duotone {
background-image:
linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
url("/images/portrait.jpg");
background-size: cover;
background-blend-mode: color;
}
/* The same idea over an img element */
.overlay--wash::after {
background: linear-gradient(135deg, #1e1b4b, #f472b6);
mix-blend-mode: color;
}
```
`background-blend-mode` fonde i livelli di un solo elemento. `mix-blend-mode` fonde un elemento con ciò che gli sta dietro, qui la foto.
La tecnica completa, compreso come scegliere i due colori, è in [l'effetto duotone](https://gradiently.design/it/guide/duotone-effect).
## Overlay che mantengono il testo leggibile
L'errore più comune è un velo scuro uniforme su tutta la foto, diciamo nero al 50 percento. Spegne l'immagine ovunque e può comunque non essere abbastanza scuro dietro le parole. Dai invece una forma all'overlay: più scuro sotto il testo, trasparente dove la foto conta.
1. **Decidi dove vanno le parole** In basso a sinistra per le didascalie, nel terzo sinistro per il testo dell'hero, al centro per una sola riga.
2. **Punta il gradiente verso di esse** Usa `to top` per il testo in basso, `to right` per il testo a sinistra, o un radiale centrato sulle parole.
3. **Fermati presto** Sfuma fino alla trasparenza totale entro il 60-70 percento così gran parte della foto resta intatta.
4. **Controlla il caso peggiore** Misura il contrasto dove la foto è più luminosa dietro una lettera. [Contrasto del colore e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) elenca i rapporti.
Le sfumature morbide con molti punti appaiono più fluide di una dissolvenza a due punti; il metodo è in [gradienti trasparenti in CSS](https://gradiently.design/it/guide/css-gradient-transparent).
## Overlay senza tentativi
Su un sito web ogni overlay lo regoli a mano. Per post social, banner e slide, Gradiently salta il passaggio: un Mark sa dove sono le tue parole e approfondisce o alleggerisce i propri colori dietro di esse, e le foto possono essere tinte con i colori del Mark in mono, duotone o lavaggio, e con Pro il design si ridimensiona in ogni formato in un solo passaggio, senza overlay da rifare.
Un ampio banner per l'evento Harbour Days con uno sfondo a gradiente che si approfondisce dietro il titolo
Un banner per un evento nella dimensione di un hero web, con lo sfondo che si calma dietro le parole invece di un overlay regolato a mano.
## FAQ
### Come metto un gradiente sopra un'immagine di sfondo in CSS?
Elenca il gradiente prima dell'immagine in `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Il primo livello è disegnato sopra.
### Come aggiungo un gradient overlay a un elemento img?
Avvolgi l'immagine in un elemento posizionato e metti il gradiente sul suo pseudo-elemento `::after` con `position: absolute` e `inset: 0`.
### Qual è la differenza tra background-blend-mode e mix-blend-mode?
`background-blend-mode` fonde i livelli di sfondo di un solo elemento. `mix-blend-mode` fonde un intero elemento con ciò che sta dietro.
### Quanto deve essere scuro l'overlay di un'immagine per il testo?
Abbastanza da far superare al testo i controlli di contrasto nel punto più luminoso dietro di esso. Dai al gradiente una forma che sia più scura lì e trasparente altrove.
### Posso animare un gradient overlay al passaggio del mouse?
Sì. Metti l'overlay su uno pseudo-elemento e applica una transizione alla sua `opacity`, che costa meno che animare lo sfondo stesso.
