Funzione drop-shadow

La funzione drop-shadow permette di aggiungere un'ombra a un'immagine di sfondo.

Sintassi

selettore {
	filter: drop-shadow(spostamento x, spostamento y, raggio di sfocatura, colore);
}

Valori

Valore	Descrizione
spostamento x	Spostamento dell'ombra orizzontalmente rispetto allo sfondo. Un numero positivo indica uno spostamento dell'ombra verso destra, uno negativo - verso sinistra. Parametro obbligatorio.
spostamento y	Spostamento dell'ombra verticalmente rispetto allo sfondo. Un numero positivo indica uno spostamento dell'ombra verso il basso, uno negativo - verso l'alto. Parametro obbligatorio.
sfocatura	Imposta il raggio di sfocatura dell'ombra. Più grande è il valore, più l'ombra risulta sfocata. Parametro opzionale. Di default è `0`.
colore	Colore dell'ombra. Parametro opzionale. Di default è impostato il colore nero per l'ombra.

Esempio

Impostiamo per la nostra immagine un'ombra blu senza spostamento lungo gli assi, con una sfocatura di 5px:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

funzione blur,
che sfoca lo sfondo
funzione brightness,
che imposta la luminosità dello sfondo
funzione contrast,
che imposta il contrasto dello sfondo
funzione hue-rotate,
che imposta la tonalità di colore dello sfondo
funzione invert,
che inverte i colori dello sfondo
funzione opacity,
che imposta la trasparenza dello sfondo
funzione sepia,
che trasforma lo sfondo in seppia
proprietà background,
che è una proprietà abbreviata per lo sfondo
proprietà background-image,
con cui si può assegnare un'immagine di sfondo a un blocco