# Overlay a gradiente: tingere le foto senza nasconderle

[Canonical HTML page](https://gradiently.design/it/guide/gradient-overlay)

Un buon overlay cambia l’atmosfera di una foto e dà alle tue parole un posto dove stare, mentre l’immagine continua a trasparire. Uno cattivo trasforma ogni foto nello stesso rettangolo torbido. Ecco come distinguerli.

## The short version

- Un overlay a gradiente è uno strato di colore che sfuma su una foto, usato per tingere l’immagine, creare un’atmosfera o ottenere un’area più calma per il testo.
- L’overlay più comune è lo scrim: trasparente a un bordo e scuro all’altro, così si scurisce solo la parte della foto dietro le parole.
- Un overlay a velo di colore usa i colori del brand a opacità parziale, spesso con una modalità di fusione come multiply, screen o color, così la foto mantiene i dettagli.
- Gli overlay funzionano meglio quando coprono solo l’area che ha bisogno di aiuto, invece di oscurare tutta l’immagine in modo uniforme.
- Se uno scrim deve superare circa l’80 percento di opacità al bordo più scuro perché il testo si legga, scegli una foto più calma o sposta le parole.

Un **overlay a gradiente** è uno strato di colore che sfuma su una foto, posato sopra per tingerla, unificare un insieme di immagini o rendere leggibile un titolo. Il trucco è che sfuma: una parte della foto è toccata con forza, il resto appena. Per questo un overlay a gradiente sembra pensato, mentre un riquadro nero piatto al 50 percento sembra una toppa. Scegli tu dove cade il colore, quanto diventa forte e come si fonde con l’immagine sotto.

## Quattro tipi di overlay a gradiente

Quasi ogni overlay che vedi su un sito, un manifesto o un post è di uno di quattro tipi. Sapere quale ti serve fa risparmiare molti ritocchi ai cursori dell’opacità.

| Overlay | Che cosa fa | Da usare per |
| --- | --- | --- |
| Scrim | Da trasparente a scuro su un bordo | Titoli e didascalie su foto affollate |
| Velo di colore | Colori del brand a forza parziale su tutta l’immagine | Far sembrare un insieme foto non correlate |
| Duotone o mappa di gradiente | Sostituisce i colori della foto con due o più dei tuoi | Look forti e grafici; vedi [l’effetto duotone](https://gradiently.design/it/guide/duotone-effect) |
| Vignettatura | Scurisce gli angoli con una dissolvenza radiale | Portare lo sguardo al centro |

Le quattro famiglie di overlay. Alla maggior parte dei design ne basta una, non tutte e quattro.

## Lo scrim: un overlay per il testo

Lo scrim è il cavallo da tiro. Parte del tutto trasparente e si scurisce verso il bordo dove stanno le tue parole, di solito in basso o a sinistra. La foto resta intatta dove c’è il soggetto, e il testo ottiene un fondo calmo e scuro. Usa un tono scuro della foto stessa e non il nero puro: un marrone profondo su un interno caldo, un blu notte su un paesaggio marino. Il nero puro sembra una macchia.

- Scrim in basso, blu notte: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Scrim a sinistra, marrone caldo: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vignettatura: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Tre overlay da soli, prima che ci sia una foto sotto. Ognuno resta libero dove starebbe il soggetto.

Il 40 percento superiore dello scrim in basso è del tutto libero, il che mantiene luminosi volti e prodotti. Il buio cresce nella metà inferiore e culmina proprio al bordo, dove sta una didascalia. Per altri modi di mantenere leggibili le parole sulle immagini, leggi il [testo leggibile sulle foto](https://gradiently.design/it/guide/readable-text-on-photos).

## Overlay a velo di colore e modalità di fusione

Un velo di colore è il modo in cui i brand fanno sembrare una famiglia foto di repertorio, scatti da telefono e immagini di eventi. Posa sulla foto un gradiente di due colori del brand e cambia la sua modalità di fusione. La modalità di fusione decide come il colore si mescola con l’immagine, e conta più dei colori.

| Modalità di fusione | Effetto sulla foto | Ideale con |
| --- | --- | --- |
| Normal | Copre la foto all’opacità che imposti | Scrim dietro il testo |
| Multiply | Scurisce e tinge; i bianchi prendono il colore dell’overlay | Foto chiare e aeree |
| Screen | Schiarisce e tinge; i neri prendono il colore dell’overlay | Foto scure e cupe |
| Color | Mantiene luci e ombre della foto, cambia le tonalità | Una forte tinta singola del brand |
| Soft light | Contrasto e tinta delicati | Veli sottili sui ritratti |

Le modalità di fusione hanno gli stessi nomi in CSS, Figma, Photoshop e nella maggior parte degli strumenti di design.

Velo da viola a corallo: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

Un velo a tre colori con opacità decrescente. Impostato su multiply su una foto chiara, si legge come un tramonto viola caldo; su screen su una foto scura, brilla.

## Come aggiungere un overlay a gradiente a una foto

1. **Decidi a che cosa serve l’overlay** Testo, atmosfera o coerenza. Uno scrim per il testo, un velo per atmosfera e coerenza. Se non sai dire quale, probabilmente non ti serve.
2. **Preleva un tono scuro dalla foto** Scegli il colore più profondo già presente nell’immagine per uno scrim, o due colori del brand per un velo.
3. **Disegna il gradiente sull’area che ne ha bisogno** Parti libero sul soggetto e cresci verso il bordo con le parole. Tieni lunga la dissolvenza così non si vede nessuna linea.
4. **Scegli una modalità di fusione** Normal per gli scrim, multiply per le foto chiare, screen per quelle scure, color per una tinta singola.
5. **Abbassa l’opacità finché quasi sparisce** Poi rialzala di un passo. I migliori overlay si notano solo quando li spegni.
6. **Controlla il testo alla dimensione del telefono** Riduci il design alla dimensione in cui sarà visto e leggi ogni parola. Un contrasto che funziona su un monitor può fallire su un telefono; il [contrasto del colore](https://gradiently.design/it/guide/color-contrast-accessibility) ha gli obiettivi da raggiungere.

## Quanto scuro deve essere un overlay a gradiente

### Nasconde la foto

- Uno strato nero piatto al 50 percento su tutto
- Lo stesso overlay su ogni immagine, qualunque sia la luce
- Nero puro o grigio che spegne pelle e cibo
- Un bordo netto dove il gradiente finisce
- Un overlay così forte che la foto potrebbe essere qualsiasi cosa

### Tinge la foto

- Libero sul soggetto, più scuro solo dietro le parole
- Forza regolata per ogni foto
- Un tono scuro preso dall’immagine o dal brand
- Una dissolvenza lunga e graduale, senza linee
- La foto ancora riconoscibile a colpo d’occhio

Come limite pratico, se il bordo più scuro di uno scrim deve superare circa l’80 percento perché il testo si legga, la foto è troppo affollata per quel punto. Sposta le parole, ritaglia diversamente o scegli un’immagine più calma. Un velo su tutta l’immagine ne richiede molto meno, altrimenti la foto smette di sembrare una foto.

## Overlay a gradiente su un sito web

Sul web puoi sovrapporre overlay e foto in una sola dichiarazione, che li tiene insieme quando l’immagine cambia. L’overlay viene per primo perché il CSS dipinge il primo strato in cima. L’insieme completo delle tecniche, comprese modalità di fusione e pseudo elementi, è nell’[overlay a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

Uno scrim in basso su una foto hero. Cambia l’immagine e l’overlay resta.

## Un velo che corrisponde al tuo brand ogni volta

Gli overlay si disperdono quando ogni designer sceglie i propri colori. Nello Studio di Gradiently le foto possono essere tinte con i colori del tuo Mark in mono, duotone o velo, così immagini di fonti diverse condividono una sola palette senza abbinamenti a mano. E quando le parole stanno su un Mark e non su una foto, lui calma da solo l’area dietro di loro, senza alcun overlay. Leggi le [foto duotone nei colori del tuo Mark](https://gradiently.design/it/guide/photo-duotone-in-mark-colours) per capire come funziona il velo.

Un post immobiliare in cui il titolo Appena in vendita sta sulla parte più movimentata dello sfondo

Senza aiuto, il colore più movimentato attraversa dritto il titolo.

Lo stesso post immobiliare con un’area più calma e profonda dietro il titolo, così ogni riga si legge

Con il Mark che risponde, l’area dietro le parole si calma, il lavoro che di solito fa uno scrim.

## FAQ

### Che cos’è un overlay a gradiente?

Uno strato di colore che sfuma su un’immagine, posato sopra per tingerla, creare un’atmosfera o rendere il testo più leggibile. Differisce da un overlay piatto perché la sua forza cambia lungo l’immagine.

### Che opacità deve avere l’overlay di una foto?

Il minimo che rende leggibile il testo: spesso dal 50 all’80 percento al bordo più scuro di uno scrim, e molto meno per un velo su tutta la foto. Se te ne serve di più, la foto è probabilmente troppo affollata per quel punto.

### Quale modalità di fusione è la migliore per un overlay di colore?

Multiply va bene per le foto chiare, screen per quelle scure, e color cambia le tonalità della foto mantenendone luci e ombre. Usa normal per gli scrim dietro il testo.

### Devo usare il nero per un overlay a gradiente?

Di solito no. Un tono profondo prelevato dalla foto, come un blu notte o un marrone scuro, scurisce l’immagine senza farla sembrare spenta.

### Come aggiungo un overlay a gradiente in CSS?

Elenca prima il gradiente e per secondo l’immagine in `background-image`, per esempio `linear-gradient(...), url(photo.jpg)`. Il primo strato viene dipinto in cima.