Generatore di box-shadow CSS

Cos'è Generatore di box-shadow CSS?

Il generatore di box-shadow CSS è un editor visivo gratuito della proprietà box-shadow, pensato per sviluppatori front-end e designer. Aggiungi uno o più livelli di ombra e regola per ciascuno offset-x, offset-y, raggio di sfocatura, raggio di espansione, colore e opzione inset con semplici campi numerici e un selettore di colore. Un riquadro di anteprima su uno sfondo a scacchiera mostra il risultato combinato in tempo reale, e la dichiarazione box-shadow completa — separando ogni livello con virgole — viene generata per essere copiata. Usalo per creare ombre di elevazione morbide, neumorfismo nitido, effetti glow o profondità a livelli in stile Material senza memorizzare l'ordine dei valori.

Come usare Generatore di box-shadow CSS

1. Imposta offset-x e offset-y del primo livello (in px) per spostare l'ombra in orizzontale e in verticale; i valori negativi la spostano a sinistra o verso l'alto.
2. Regola il raggio di sfocatura (quanto è morbida l'ombra) e il raggio di espansione (quanto cresce o si riduce).
3. Scegli un colore con il campione o digita un valore esadecimale — un hex a 8 cifre come #00000040 imposta la trasparenza dell'ombra.
4. Spunta la casella inset per disegnare l'ombra all'interno dell'elemento anziché all'esterno.
5. Fai clic su Aggiungi livello per sovrapporre un'altra ombra, poi riordina modificando i valori; rimuovi qualsiasi livello con il suo pulsante cestino.
6. Osserva l'aggiornamento dell'anteprima, poi copia il CSS box-shadow generato nel tuo foglio di stile.

Esempi

x 0, y 4, sfocatura 12, espansione 0, colore #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Livello 1: 0 1 2 0 #0000001a · Livello 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset selezionato, x 0, y 2, sfocatura 6, espansione 0, colore #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Domande frequenti

Qual è l'ordine dei valori di box-shadow?

Ogni livello si scrive come offset-x, offset-y, raggio di sfocatura, raggio di espansione, colore, con una parola chiave inset opzionale davanti. Questo strumento produce sempre tutte e quattro le lunghezze in px (offset-x, offset-y, sfocatura, espansione), così l'ordine è inequivocabile e facile da regolare a mano in seguito.

Posso aggiungere un'ombra semitrasparente o colorata?

Sì. Digita qualsiasi colore CSS nel campo colore — un hex completo a 8 cifre come #00000040 (le ultime due cifre sono l'alfa) dà un'ombra semitrasparente, e puoi usare colori con nome o qualsiasi hex. Il campione del selettore gestisce i colori pieni #rrggbb; per l'alfa, modifica il campo di testo.

Come sovrappongo più ombre?

Fai clic su Aggiungi livello per ogni ombra aggiuntiva. Il CSS generato separa ogni livello con virgole in ordine, dall'alto in basso — il primo livello viene disegnato per ultimo (in cima). Usalo per profondità a livelli in stile Material o per combinare un glow esterno con un riflesso inset.

Cosa fa la casella inset?

Inset disegna l'ombra all'interno del bordo dell'elemento, creando un aspetto incassato o di bagliore interno anziché un'ombra esterna. Spuntala per ogni livello; puoi mescolare ombre inset ed esterne nello stesso valore box-shadow.

I miei dati vengono caricati da qualche parte?

No. Il generatore funziona interamente nel tuo browser con JavaScript — i tuoi colori e valori non vengono mai inviati a un server, quindi funziona in modo privato e persino offline una volta caricata la pagina.