Generatore di Box Shadow CSS

Cosa fa davvero box-shadow?

box-shadow disegna un’ombra attorno (oppure, con inset, all’interno) del border box di un elemento. Ogni livello è composto da un massimo di sei valori: la parola chiave opzionale inset, gli offset X e Y, il raggio di sfocatura, il raggio di diffusione e un colore. Più livelli separati da virgola si sovrappongono nell’ordine di scrittura, con il primo livello disegnato in cima. Questa sovrapposizione è ciò che dà profondità alle ombre delle UI moderne: un livello stretto e scuro per il contatto, uno morbido e ampio per la luce ambientale, a volte un leggero bagliore colorato sopra. Questo generatore ti offre un palcoscenico live a scacchi trasparenti per vedere esattamente come cade l’ombra — inclusi gli effetti sottili che spariscono su uno sfondo piatto. Puoi trascinare qualsiasi valore con lo slider per regolazioni rapide, digitare un numero esatto in pixel quando un designer ti consegna le specifiche, e riordinare i livelli quando l’ordine di disegno conta. L’output copre sia il CSS puro sia la sintassi a valore arbitrario di Tailwind (shadow-[...]), e lo stack di ombre corrente è codificato nell’hash dell’URL così un link condivisibile ricostruisce esattamente la stessa ombra dall’altra parte. Non c’è alcun viaggio al server — tutto si renderizza lato client mentre modifichi gli input.

Come usarlo

1. Parti da un preset

La fila dei preset ti offre sei punti di partenza comuni. Sottile e Morbida vanno bene per le card; Netta è il look piatto 8-bit; Neumorfica richiede uno sfondo colorato per essere leggibile; Bagliore funziona su UI scure; Profonda è per i modali.

2. Regola i valori

Ogni livello ha offset X / Y, sfocatura, diffusione, colore e opacità, e un toggle inset. Trascina gli slider per un feedback live oppure digita numeri esatti nella casella accanto a ciascuno slider.

3. Sovrapponi e riordina

Premi Aggiungi livello per impilare più ombre. Ogni nuovo livello viene aggiunto con valori predefiniti neutri. Usa le frecce su / giù per riordinare — il primo livello viene disegnato per ultimo (sopra gli altri).

4. Copia l’output

Copia il CSS direttamente nel tuo foglio di stile, oppure prendi la classe a valore arbitrario di Tailwind per uso inline. Copia URL di condivisione ti dà un link che ricostruisce esattamente lo stack — comodo per inviarlo a un designer.

Analisi della sintassi CSS box-shadow

La sintassi completa è box-shadow: [inset] <offset-x> <offset-y> <raggio-sfocatura> <raggio-diffusione> <colore>. Gli offset X / Y spostano l’ombra orizzontalmente e verticalmente. Una Y positiva spinge l’ombra verso il basso (la convenzione per la luce che proviene dall’alto). Il raggio di sfocatura ammorbidisce i bordi; 0 produce un’ombra netta. Il raggio di diffusione ingrandisce o restringe l’ombra prima che venga applicata la sfocatura — valori positivi la rendono più grande, valori negativi la stringono in modo che faccia capolino dai bordi invece di sporgere. Il colore accetta qualsiasi colore CSS, ma rgba() con un’alpha bassa tende a sembrare migliore di uno scuro completamente opaco — le ombre del mondo reale sono occlusioni parziali, non vernice. La parola chiave opzionale inset disegna l’ombra all’interno del box, utile per effetti di pulsanti premuti. Più ombre separate da virgole si impilano dal davanti al dietro: la prima vince dove si sovrappongono.

Scegliere valori che sembrano giusti

Card / pannelli: offset Y di 4-12px, sfocatura 12-28px, diffusione da -2 a -8, alpha 0,08-0,20. Due livelli (uno stretto, uno largo) di solito battono un solo livello forte. Pulsanti: Y di 1-2px, sfocatura 2-4px, alpha molto bassa — pensa a un’ombra di contatto. Modali: Y di 20-40px, sfocatura 40-80px, diffusione negativa, alpha 0,25-0,45. Bagliore: X e Y di 0, sfocatura 20-60px, il colore è l’accent del brand al 30-60% di alpha. Inset: piccoli offset (1-2px) e sfocatura minima per controlli in stato premuto. Da evitare: nero puro a piena alpha — schiaccia tutto ciò che sta sotto. Usa la tonalità dello sfondo della pagina mescolata più scura per ombre che sembrano attaccate.

Domande frequenti

Perché le ombre multi-livello sono migliori di una grande?

Le ombre reali hanno due parti: un bordo duro e scuro vicino al punto di contatto (umbra) e un alone morbido che svanisce (penumbra). Sovrapporre un livello stretto a bassa sfocatura con uno più ampio e morbido imita questo fenomeno fisicamente e si legge come più radicato. Una singola ombra forte sembra un adesivo.

Cosa fa davvero la diffusione?

La diffusione gonfia (positiva) o restringe (negativa) il rettangolo dell’ombra prima che venga applicata la sfocatura. Una diffusione negativa è ottima per le card: tira l’ombra verso l’interno in modo che non sporga oltre gli angoli, dando un look più stretto e controllato.

A cosa serve inset?

inset disegna l’ombra all’interno dell’elemento invece che attorno ad esso. È il modo standard per simulare pulsanti premuti, input in stile well e card incassate. Combina una leggera ombra inset con una leggera ombra outset per un effetto “incassato” raffinato.

L’URL di condivisione funzionerà per qualcun altro?

Sì. Lo stack di ombre corrente è codificato nell’hash dell’URL (#shadow=...). Chiunque apra quel link vedrà esattamente lo stesso stack di livelli, perché la codifica è deterministica e gira interamente lato client.

Perché la classe Tailwind usa underscore?

La sintassi a valore arbitrario di Tailwind non permette spazi all’interno delle parentesi quadre. La convenzione è sostituire gli spazi con underscore (shadow-[0_4px_12px_rgba(0,0,0,0.1)]). Tailwind legge gli underscore come spazi al momento della compilazione.

Ci sono costi in termini di prestazioni?

Le box shadow sono rasterizzate dalla GPU ed economiche su un livello statico, ma animare direttamente box-shadow forza un repaint. Se ti serve un’ombra animata, fai un fade su un elemento separato a livelli con un’ombra statica sopra — quello si anima come una trasformazione / opacità composita e rimane fluido.

Generatore di Box Shadow CSS