Generatore di box-shadow CSS online e gratis

Q: Come faccio un'ombra interna?

Aggiungi inset all'inizio: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. È utile per i campi dei moduli o i pulsanti premuti.

Q: Perché l'ombra del mio PNG trasparente è quadrata?

Perché box-shadow segue il box dell'elemento, non il disegno. Per seguire la sagoma, usa filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

Come funziona box-shadow

La proprietà box-shadow disegna una o più ombre attorno al box di un elemento. Ogni ombra si scrive in questo ordine:

box-shadow: [inset] spostamento-x spostamento-y [sfocatura] [espansione] colore;

Spostamento orizzontale e verticale: quanto l'ombra si sposta a destra e in basso. Con valori negativi va a sinistra o in alto.
Sfocatura: più è alta, più il bordo è sfumato. Con 0 l'ombra ha il bordo netto.
Espansione: ingrandisce o riduce l'ombra prima di sfocarla. Un valore negativo la nasconde sotto l'elemento.
Colore: quasi sempre nero o il colore dello sfondo con poca opacità, per esempio rgba(0, 0, 0, 0.2).
inset: l'ombra va all'interno dell'elemento, come se fosse incassato.

Più ombre sullo stesso elemento

Le ombre si separano con virgole e la prima sta sopra le altre. Combinare un'ombra corta e netta con una ampia e morbida dà un risultato molto più naturale di una sola ombra scura: è quello che fanno gli esempi Rialzata e A livelli.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

Ombre sulle immagini: box-shadow o drop-shadow

box-shadow segue la forma del box, compreso il suo border-radius, quindi è quello che serve per foto e card. Se l'immagine è un PNG o un SVG con sfondo trasparente e vuoi che l'ombra segua il contorno del disegno, usa il filtro drop-shadow():

img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }

drop-shadow() non ha espansione né inset, e non accetta più livelli separati da virgole.

Consigli

Usa opacità basse (tra 0,05 e 0,25): un'ombra nera al 50 % raramente sta bene.
Per un'ombra solo in basso, combina uno spostamento verticale con un'espansione negativa: 0 8px 6px -6px.
In modalità scura le ombre si vedono appena: un bordo sottile o uno sfondo un po' più chiaro funzionano meglio.
Per animare un'ombra, anima l'opacity di uno pseudo-elemento che la porta, non il box-shadow stesso: è molto più fluido.

Domande frequenti

Che cos'è box-shadow in CSS?

È la proprietà che aggiunge ombre al box di un elemento. Accetta spostamento, sfocatura, espansione, colore e la parola chiave inset, e si possono applicare più ombre separate da virgole. Funziona in tutti i browser attuali senza prefissi.

Come metto un'ombra solo nella parte inferiore?

Usa uno spostamento verticale positivo e un'espansione negativa simile alla sfocatura, così l'ombra non sporge dai lati: box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

Come faccio un'ombra interna?

Aggiungi inset all'inizio: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. È utile per i campi dei moduli o i pulsanti premuti.

Si possono usare più ombre insieme?

Sì, separandole con virgole. La prima dell'elenco viene disegnata sopra. In questo generatore, ogni ombra è un livello.

Perché l'ombra del mio PNG trasparente è quadrata?

Perché box-shadow segue il box dell'elemento, non il disegno. Per seguire la sagoma, usa filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

box-shadow influisce sulle prestazioni?

Un'ombra statica costa pochissimo. Quello che pesa è animarla o usare sfocature molto grandi su molti elementi, perché obbliga a ridisegnare. Per le animazioni, cambia l'opacità di uno pseudo-elemento con l'ombra.

Generatore di box-shadow

Codice CSS

Come funziona box-shadow

Più ombre sullo stesso elemento

Ombre sulle immagini: box-shadow o drop-shadow

Consigli

Domande frequenti

Altri strumenti