Funzione CSS drop-shadow()

Definizione e utilizzo

CSS drop-shadow() Le funzioni di filtro applicano effetti di proiezione alle immagini.

Aggiungi diversi effetti di proiezione alle immagini:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Aggiungi diversi effetti di proiezione alle immagini (utilizza valori negativi per l'ombra orizzontale e verticale):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Valore	Descrizione
h-shadow	Obbligatorio. Specifica il valore in pixel per l'ombra orizzontale. Un valore negativo posiziona l'ombra a sinistra dell'immagine.
v-shadow	Obbligatorio. Specifica il valore in pixel per l'ombra verticale. Un valore negativo posiziona l'ombra sopra l'immagine.
blur	Facoltativo. Aggiungi un effetto sfocatura all'ombra, in pixel. Un valore maggiore aumenta l'effetto sfocatura (l'ombra diventa più grande e più debole). Non sono ammessi valori negativi. Se non specificato, il valore predefinito è 0 (la parte esterna dell'ombra è chiara).
spread	Facoltativo. Deve essere specificato in valori pixel. Un valore positivo espande e ingrandisce l'ombra, mentre un valore negativo la restringe e la rende più piccola. Se non specificato, il valore predefinito è 0 (l'ombra è della stessa dimensione dell'elemento).
color	Facoltativo. Aggiungi un colore all'ombra. Se non specificato, il colore dipende dal browser (solitamente nero).