Proprietà CSS background-blend-mode

La proprietà CSS background-blend-mode definisce come le immagini di sfondo di un elemento si fondono tra loro e con il background-color dell'elemento. Ti permette di combinare sfondi a strati come fanno i programmi di grafica con i loro livelli — tingendo una foto, creando un effetto duotone, o dissolvendo una texture in un'altra — senza toccare i file immagine stessi.

Questa pagina spiega cosa fa ciascun modo di fusione, come funziona la fusione quando un elemento ha più livelli di sfondo, casi d'uso pratici ed esempi eseguibili. Il valore predefinito è normal, che significa nessuna fusione.

Riferimento alla proprietà


Valore iniziale	`normal`
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	No
Animabile	No
Versione	CSS3
Sintassi DOM	`object.style.backgroundBlendMode = "luminosity"`

Sintassi

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Dove <blend-mode> è uno tra:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Come funziona la fusione a strati

Un elemento può impilare più livelli di sfondo: la lista background-image, più il background-color dipinto sotto tutti i livelli. background-blend-mode accetta un elenco di modi separati da virgola che corrispondono, nell'ordine, ai livelli background-image:

Se si forniscono meno modi che livelli, la lista si ripete dall'inizio finché ogni livello non ha un modo.
Se si forniscono più modi che livelli, i modi in eccesso vengono ignorati.
Il background-color è sempre il livello più in basso e si fonde con il livello immagine direttamente sopra di esso.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

La fusione avviene solo tra gli sfondi dello stesso elemento — non si fonde con il contenuto visivamente dietro l'elemento nel contesto di sovrapposizione. Per fondere un elemento con ciò che si trova sotto di esso nella pagina, usa invece mix-blend-mode.

Valori

Valore	Cosa fa
`normal`	Nessuna fusione — il livello superiore dipinge sopra i livelli sottostanti (predefinito).
`multiply`	Moltiplica i valori dei canali colore. Il risultato è sempre più scuro; il bianco è trasparente, il nero rimane nero.
`screen`	Inverso di `multiply`. Il risultato è sempre più chiaro; il nero è trasparente, il bianco rimane bianco.
`overlay`	Applica `multiply` dove il livello inferiore è scuro e `screen` dove è chiaro — aumenta il contrasto.
`darken`	Mantiene il pixel più scuro, canale per canale.
`lighten`	Mantiene il pixel più chiaro, canale per canale.
`color-dodge`	Schiarisce il livello inferiore per riflettere il livello superiore, producendo luci vivide.
`color-burn`	Scurisce il livello inferiore per riflettere il livello superiore, intensificando le ombre.
`hard-light`	Come `overlay` ma con i ruoli di livello superiore e inferiore invertiti — un forte aumento del contrasto.
`soft-light`	Una versione più morbida di `overlay`; preserva i mezzitoni, evita bordi duri.
`difference`	Sottrae il colore più scuro da quello più chiaro per canale. I colori identici producono il nero.
`exclusion`	Simile a `difference` ma con contrasto inferiore; i mezzitoni diventano grigi.
`hue`	Prende la tonalità del livello superiore, con la saturazione e la luminosità del livello inferiore.
`saturation`	Prende la saturazione del livello superiore, con la tonalità e la luminosità del livello inferiore.
`color`	Prende la tonalità e la saturazione del livello superiore con la luminosità del livello inferiore — il modo standard per tingere una foto in scala di grigi.
`luminosity`	Inverso di `color`: prende la luminosità del livello superiore con la tonalità e la saturazione del livello inferiore.

Comprendere le famiglie di modi di fusione

I 16 modi rientrano in quattro famiglie:

Modi di oscuramento (multiply, darken, color-burn) — il risultato non è mai più luminoso di nessuna delle due sorgenti. Utili per ombre, approfondimento delle ombre e aggiunta di tinte scure.

Modi di schiarimento (screen, lighten, color-dodge) — il risultato non è mai più scuro di nessuna delle due sorgenti. Utili per bagliori, perdite di luce ed effetti di luminosità.

Modi di contrasto (overlay, hard-light, soft-light) — scuriscono le aree scure mentre schiariscono quelle chiare, aumentando il contrasto complessivo. Soft-light è il più sottile; hard-light è il più aggressivo.

Modi differenza/esclusione (difference, exclusion) — producono risultati invertiti o psichedelici. Usati principalmente per effetti creativi o animazioni; meno comuni nel lavoro UI.

Modi componente (hue, saturation, color, luminosity) — dividono un colore nei suoi componenti HSL e scambiano singoli canali tra i livelli. Questi sono gli strumenti principali per la ricolorazione delle foto.

Esempi

normal

Nessuna fusione — l'immagine in primo piano viene disegnata sopra l'immagine di sfondo senza alcuna interazione tra di esse.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

screen

Le aree chiare rimangono luminose; le aree scure sull'immagine superiore diventano trasparenti, rivelando il livello sottostante. Ottimo per aggiungere bagliori o morbide perdite di luce.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

color-dodge

Schiarisce il livello inferiore per riflettere il livello superiore. Produce risultati vividi e ad alta chiave. Utile per effetti neon o bagliori.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

multiply

Moltiplica i valori dei canali colore, producendo sempre un risultato più scuro di entrambe le sorgenti. Le aree bianche diventano trasparenti; le aree nere rimangono nere. La scelta classica per aggiungere tinte o ombre a una foto.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

overlay

Aumenta il contrasto applicando multiply dove il livello inferiore è scuro e screen dove è chiaro. Mantiene il carattere tonale del livello inferiore rendendolo più vivace.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

darken

Confronta ogni canale colore e mantiene il valore più scuro. I due livelli competono pixel per pixel, e le parti più scure di entrambi i livelli vincono sempre.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

saturation

Prende la saturazione del livello superiore preservando la tonalità e la luminosità del livello inferiore. Utile per desaturare o risaturare parti di una foto mantenendo la palette di colori.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Casi d'uso comuni

Tingere una foto con un colore brand

Sovrapponi un background-color solido a una foto e usa multiply per spingere l'immagine verso quella tonalità. Le aree scure nella foto assorbono la tinta in modo più intenso.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Creare un effetto duotone

Imposta due sfondi a gradiente — uno per le luci, uno per le ombre — sopra un'immagine in scala di grigi usando screen e multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

La foto in scala di grigi riceve sia un livello caldo di luci (screen) sia un livello freddo di ombre (multiply), producendo il classico aspetto a due toni popolare nelle sezioni hero.

Overlay di texture

Dissolvere una texture noise o cartacea in un colore di sfondo piatto senza modificare l'asset:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light è solitamente la scelta più delicata — aggiunge texture senza sbiadire il colore base.

Ricolorazione interattiva al passaggio del mouse

Cambia il modo di fusione dinamicamente per creare un effetto hover solo CSS:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Nota: background-blend-mode non è animabile (nessuno stato intermedio), quindi le transizioni scattano invece di interpolare.

Quando è necessaria la fusione dell'intero elemento

background-blend-mode fonde i livelli solo all'interno dello sfondo dell'elemento stesso. Se hai bisogno di fondere un elemento con il contenuto dietro di esso nella pagina — ad esempio un overlay a vetro smerigliato — usa invece mix-blend-mode.

Per regolazioni di singola immagine (luminosità, contrasto, scala di grigi) dove non è necessario un secondo livello, la proprietà filter è spesso una soluzione più semplice, e opacity è lo strumento giusto per dissolvere l'intero elemento.

Supporto dei browser

background-blend-mode è supportato in tutti i browser moderni (Chrome, Firefox, Edge, Safari e Opera). Internet Explorer non lo ha mai supportato. Fornisci un fallback background semplice e sensato per gli ambienti legacy — gli sfondi non fusi rendono i livelli sovrapposti normalmente senza errori visibili.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Esercitati

Pratica

Cosa fa la proprietà CSS background-blend-mode?

Definisce la modalità di fusione dell'immagine di sfondo e del colore di sfondo.Regola la dimensione dell'immagine di sfondo.Controlla lo scorrimento dell'immagine di sfondo.Consente a più immagini di sfondo di fondersi tra loro.Determina la posizione dell'immagine di sfondo.