Box-shadow vs Drop-shadow: le differenze in CSS

Pubblicato da

 


Quando si parla di ombre in CSS, i due protagonisti più comuni sono box-shadow e drop-shadow. A prima vista potrebbero sembrare intercambiabili, ma in realtà funzionano in modi diversi e servono a scopi specifici.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

1. box-shadow

Definizione:
box-shadow è una proprietà CSS che applica un’ombra a tutto il riquadro (box) dell’elemento, seguendo i bordi rettangolari (o arrotondati se c’è border-radius).

Sintassi:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
  • offset-x / offset-y → posizione dell’ombra
  • blur-radius → sfocatura (più alto = più morbida)
  • spread-radius → espansione o contrazione dell’ombra
  • color → colore dell’ombra
  • inset (opzionale) → ombra interna anziché esterna

Esempio:

.card {
  box-shadow: 4px 6px 10px rgba(0,0,0,0.3);
}

Caratteristiche:

  • Funziona su qualsiasi elemento HTML.
  • Non tiene conto della trasparenza del contenuto: l’ombra segue la forma del box, non quella dei pixel visibili.
  • Supporta più ombre separate con la stessa proprietà.

2. drop-shadow()

Definizione:
drop-shadow() è una funzione filtro (filter: drop-shadow(...)) che applica un’ombra basata sulla forma visibile dell’elemento, considerando eventuali trasparenze.

Sintassi:

filter: drop-shadow(offset-x offset-y blur-radius color);

Esempio:

.icon {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}

Caratteristiche:

  • Perfetto per immagini PNG/SVG con sfondo trasparente: l’ombra segue i contorni opachi dell’immagine, non il box rettangolare.
  • Non ha spread-radius e non supporta ombre interne.
  • Può essere combinato con altri filtri (es. blur, brightness, ecc.).
  • Più costoso in termini di prestazioni, perché deve calcolare i pixel trasparenti.

3. Differenze principali

Caratteristica box-shadow drop-shadow()
Tipo Proprietà CSS Funzione filtro
Area ombra Bordi del box Pixel visibili dell’elemento
Supporto trasparenza No Sì
Spread-radius Sì No
Ombra interna Sì (inset) No
Prestazioni Più veloce Più pesante (pixel-level)
Uso tipico Card, box, pulsanti Icone PNG/SVG, elementi irregolari

4. Quando usare cosa

  • Usa box-shadow per elementi con forme rettangolari o regolari (card, modali, bottoni).
  • Usa drop-shadow() quando hai bisogno che l’ombra segua la forma reale di un elemento con trasparenza (icone, figure ritagliate, immagini senza sfondo).

Esempio comparativo:

HTML (da inserire nella pagina):

<img class="box" src="logo.png" alt="Logo con box-shadow">
<img class="drop" src="logo.png" alt="Logo con drop-shadow">

CSS:

.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.9);
}

.drop {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.9));
}

➡️ Con un PNG trasparente, il box-shadow mostrerà un rettangolo d’ombra, mentre drop-shadow() seguirà i contorni reali del logo.



💡Tip finale

Se vuoi un’ombra “realistica” su elementi irregolari (tipo una sagoma di un personaggio), drop-shadow() è l’arma vincente. Se invece vuoi coerenza e performance in layout complessi, box-shadow è più sicuro.




Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment