Blocchi piatti, pulsanti senza profondità, card che si confondono con lo sfondo: questo è l’aspetto tipico di un sito in cui il designer ha usato box-shadow con troppa leggerezza. Eppure un paio di righe di CSS possono trasformare un markup anonimo in un’interfaccia con personalità, aggiungendo spazi bianchi, mettendo in risalto un blocco chiave o separando delicatamente una sezione senza un solo border.

Il problema è che la maggior parte degli sviluppatori si ferma all’ombra grigia predefinita 0px 2px 5px rgba(0,0,0,0.2) e dimentica che box-shadow può fare molto di più: ombre a più strati, bagliori colorati, neumorfismo, effetti inset e persino rendering in pixel art senza un solo div.

Ecco 13 tecniche che trasformeranno box-shadow da banale utility nel tuo strumento principale per lavorare con la profondità. Ogni snippet è copiato da progetti reali e pronto all’uso.

💡 Panoramica rapida:

• Scomposizione della sintassi di box-shadow per ricordarla subito
• 13 snippet pronti all’uso: da un bordo appena visibile a un bagliore colorato a più strati
• Tre modi per includere i CSS nell’HTML e quando usarli
• Domande frequenti: performance, filtro drop-shadow, inspector di Chrome e neumorfismo

Che cos’è box-shadow e come funziona

La proprietà box-shadow aggiunge una o più ombre a un elemento. A differenza di border, un’ombra non influisce sul flusso del documento e non aumenta le dimensioni del blocco; viene disegnata «all’esterno», oltre i confini dell’elemento.

Sintassi completa:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Scomposizione di ciascun parametro:

• offset-x, scostamento orizzontale. Un valore positivo sposta l’ombra a destra, un valore negativo la sposta a sinistra.
• offset-y, scostamento verticale. Un valore positivo sposta l’ombra in basso, un valore negativo in alto. Sono gli unici due parametri obbligatori.
• blur-radius, il raggio di sfocatura. Più alto è il valore, più morbida e ampia è l’ombra. Il valore predefinito è 0, cioè un’ombra con bordi netti.
• spread-radius, il raggio di espansione. Un valore positivo espande l’ombra verso l’esterno, un valore negativo la restringe verso l’interno. Utile per simulare bordi senza border.
• color, il colore in qualsiasi formato: hex, rgb(), rgba(), hsl(). La trasparenza tramite rgba() o hsla() produce le ombre più naturali.

Il trucco è che si possono passare più valori, separati da virgole. È proprio questo che apre la porta alle tecniche descritte di seguito: ogni ombra successiva nell’elenco si sovrappone alla precedente.

1. Ombra appena visibile su tre lati

Un’ombra minimalista che aggiunge profondità senza attirare l’attenzione. Perfetta per card prodotto, anteprime di articoli e qualsiasi blocco su sfondo chiaro.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Un offset solo verso il basso di 8px e un’ampia sfocatura di 24px creano un effetto di blocco sospeso. Un’opacità di 0,2 rende l’ombra appena visibile sul bianco, quanto basta per far riposare l’occhio.

2. Ombra leggera su tutti i lati

Quando un blocco ha bisogno di un’ombra uniforme su tutto il perimetro, ad esempio per una finestra modale o un tooltip.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

L’offset orizzontale pari a zero e uno spread-radius di 0px distribuiscono l’ombra simmetricamente. Un ampio blur-radius (29px) rende la transizione morbida. Il colore rgba(100, 100, 111, ...) dà un tono grigio freddo; sul bianco rende meglio del nero puro.

3. Ombra sottile a destra e in basso

Il classico effetto «in rilievo». Funziona per pulsanti, card con stati hover e qualsiasi elemento che debba apparire tattile.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Valori di offset ridotti (circa 2px) e una sfocatura minima creano un’ombra netta, quasi vettoriale. Si abbina bene con transform: translateY(-2px) in hover; l’ombra «si muove» con il blocco, amplificando l’effetto di sollevamento.

4. Ombra marcata su tutti i lati

Per i casi in cui un elemento deve staccarsi nettamente dallo sfondo: sezioni hero, card con contenuti importanti, banner.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Un’opacità elevata (0,35) e una sfocatura ridotta (15px) producono un’ombra pronunciata e leggibile. Con offset orizzontale zero, l’ombra si distribuisce in modo uniforme; il blocco sembra fluttuare sopra la pagina.

5. Ombra diffusa a più strati

Cinque strati d’ombra che lavorano insieme: uno strato profondo per la separazione dallo sfondo, gli altri per una diffusione morbida sui lati.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

Il primo strato è l’ombra principale verso il basso (54px, opacità 0,25). Il secondo è un’ombra leggera verso l’alto (offset negativo -12px). Gli altri rifiniscono i bordi. Insieme producono un pattern di luci e ombre complesso e realistico, come un oggetto fisico sotto una luce diffusa.

6. Bordo sottile con un’ombra interna

Due ombre creano l’illusione di un bordo sottile (border) aggiungendo al contempo profondità. Nemmeno un border nel codice.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Scomposizione dei tre strati:

• Primo, il «bordo»: offset e sfocatura zero, spread-radius di 2px simula border: 2px solid.
• Secondo, l’ombra principale verso il basso per il volume.
• Terzo, un’ombra inset bianca dall’alto, che crea un punto luce (effetto vetro).

7. Ombra a sinistra e in basso

Una direzione non standard: l’ombra cade a sinistra e leggermente in basso. Funziona bene su elementi allineati al bordo destro o per creare una composizione asimmetrica.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Un offset orizzontale negativo (-4px) manda l’ombra a sinistra. Uno spread-radius negativo (-6px) ritira l’ombra verso l’interno, rendendola più compatta del blocco stesso; non «sporge» oltre i bordi.

8. Ombra su due lati: luce da in alto a sinistra, ombra in basso a destra

Simulazione di una fonte di luce direzionale, come se una lampada illuminasse dall’angolo in alto a sinistra.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Il primo strato è un'ombra bluastra (rgba(136, 165, 191, ...)) a destra e in basso. Il secondo è un "punto luce" bianco a sinistra e in alto (offset negativi, opacità elevata). Insieme creano un effetto tridimensionale realistico; il blocco sembra illuminato da un softbox.

9. Bordo glow colorato

Una singola ombra con offset e blur pari a zero, ma con un raggio di espansione positivo, produce un netto bagliore colorato attorno all'elemento.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Un bagliore blu (rgba(3, 102, 214, ...)) con un raggio di 3px. Perfetto per input in focus (:focus), pulsanti attivi ed evidenziazione della voce di menu corrente. Sostituisci il colore con rgba(220, 38, 38, 0.3) e ottieni un'evidenziazione per errore di validazione.

10. Doppia ombra interna per effetto "premuto"

Due strati inset creano un profondo effetto concavo. Adatto a sfondi texturizzati, pulsanti premuti e pannelli decorativi.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

La parola chiave inset sposta l'ombra all'interno dell'elemento. Il primo strato è un'ombra ampia dall'alto. Il secondo è più scuro e compresso, anch'esso dall'alto. Un raggio di espansione negativo (-12px, -18px) impedisce alle ombre di riempire l'intero blocco; i bordi restano chiari mentre il centro è incassato.

11. "Cascata" colorata di ombre verso il basso

Cinque strati dello stesso colore con offset crescente creano un effetto di ombra colorata a più livelli, simile al Material Design ma più brillante.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Ogni strato successivo è spostato di 5px in più e ha un'opacità inferiore. Non è specificato alcun blur, quindi le ombre sono nette, come strisce vettoriali. Questo produce una scia neon brillante dietro il blocco. Sostituisci il rosa con il colore del tuo brand per ottenere un accento riconoscibile.

12. "Cascata" colorata a destra e in basso

La stessa tecnica ma con offset orizzontale; l'ombra va in diagonale.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

Una cascata diagonale crea un senso di movimento verso destra e in basso. Ottimo sui pulsanti in hover; il blocco sembra "scivolare" dietro la propria ombra.

13. Ombra diffusa con gradiente di densità

Cinque strati in cui ogni offset successivo raddoppia (2px, 4px, 8px, 16px, 32px) mentre l'opacità rimane costante. Il risultato è un'ombra con un gradiente di densità morbido, la più realistica della collezione.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Un piccolo blur per ogni strato (1px, 2px, 4px, 8px, 16px) cresce proporzionalmente all'offset. Questo produce una diffusione fisicamente accurata; l'ombra "svanisce" con la distanza, come nel mondo reale. Perfetta per card che devono apparire il più naturali possibile.

Tre modi per includere i CSS nell'HTML

Una volta scelto uno snippet, devi aggiungerlo alla pagina. I CSS offrono tre opzioni, ognuna con la sua nicchia.

CSS interno

Le regole vengono inserite in un tag <style> all'interno dell'<head> del documento HTML. Adatto per siti one-page e prototipi rapidi; tutto sta in un unico file.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

Il lato negativo è che gli stili non vengono memorizzati nella cache separatamente dal browser e non possono essere riutilizzati su altre pagine.

CSS inline

Gli stili vengono scritti direttamente nell'attributo style di un elemento HTML. Il modo più veloce per applicare stili al volo, ma anche il più scomodo da mantenere.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Usa gli stili inline in modo selettivo: per valori dinamici provenienti da JavaScript, per layout di email (dove i fogli di stile esterni vengono spesso rimossi dai client di posta) e per il CSS critico "above the fold".

CSS esterno

Le regole vengono spostate in un file .css separato e collegate tramite <link>. Questo è lo standard per qualsiasi progetto più complesso di una singola pagina.

File styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

Documento HTML:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

Il CSS esterno viene memorizzato nella cache del browser, è facile da mantenere e scalabile. In tutti e tre i casi, il risultato del rendering è lo stesso; scegli il metodo in base all'architettura del tuo progetto.

Un video breve ma denso (8 minuti): l'autore mostra come sostituire ombre piatte e grigie con bagliori sfumati, strato dopo strato, spiegando ogni parametro.

⁉️🤔 Domande frequenti

Qual è la differenza tra box-shadow e filter: drop-shadow()?

box-shadow segue la forma del riquadro di delimitazione dell'elemento, sempre un rettangolo. filter: drop-shadow() segue il canale alfa e traccia la forma reale: per un PNG con trasparenza, l'ombra seguirà il contorno dell'oggetto anziché la cornice rettangolare. Ecco perché drop-shadow() è indispensabile per immagini con sfondo ritagliato, icone e SVG. Ma funziona più lentamente perché il browser analizza i pixel, non la geometria del blocco.

Quanti strati di box-shadow si possono impostare senza perdere performance?

Non c'è un limite formale, ma il tetto pratico su un dispositivo medio è di 10-15 strati. Oltre, inizierai a notare cali di FPS durante lo scorrimento e le animazioni, specialmente su dispositivi mobili. Il motivo è che ogni strato richiede un passaggio di rendering separato. Per elementi animati, limitati a 2-3 strati e usa will-change: box-shadow; questo suggerisce al browser di spostare l'elemento su un livello composito separato.

Come si visualizza e si fa il debug di box-shadow in Chrome DevTools?

Apri DevTools (F12), seleziona l'elemento nella scheda Elements e trova la proprietà box-shadow nel pannello Styles sulla destra. Clicca sull'icona del quadrato colorato accanto al valore; si aprirà un editor visuale dell'ombra con slider per offset-x, offset-y, blur e spread. Puoi modificare i valori con il mouse e vedere il risultato immediatamente. Per ombre a più strati, ogni strato viene modificato separatamente; sono elencati nello stesso campo, separati da virgole.

Cos'è il neumorphism e come si ottiene con box-shadow?

Il neumorphism è uno stile visivo in cui gli elementi sembrano "stampati" nello stesso materiale dello sfondo. Si ottiene con due ombre: una chiara in alto a sinistra e una scura in basso a destra (come nella tecnica n. 8). La condizione chiave è che lo sfondo della pagina e il colore dell'elemento devono corrispondere o essere molto vicini. Esempio per un tema chiaro:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> 
8
 
9
 markdown 
10
 
11
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12
 
13
**Can you use box-shadow to render shapes without a div?**
14
 
15
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16
 
17
## Which shadow should you choose for your project?
18
 
19
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20
 
21
A quick guide:
22
 
23
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28
 
29
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.