Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind
Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
Aggiornato maggio 2026
Revisionato da Rafael Duarte
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-[10px_10px_20px_0px_rgba(30,_41,_59,_0.15)]
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Invio per copiare CSS
Come usare il generatore di box shadow CSS
Cursori visivi, anteprima dal vivo, codice pronto da copiare
1. Scegli la modalità
Standard per un'ombra classica, Neu per il neumorfismo, Vetro per il glassmorphism, oppure parti da uno dei 19 preset.
2. Regola i cursori
Scostamento X e Y, blur, spread, opacità e colore: l'anteprima su card, pulsante, campo o cerchio si aggiorna mentre trascini.
3. Copia il codice
Scegli tra CSS, classe Tailwind o variabile CSS. Shift+Invio copia il CSS senza toccare il mouse.
Ombre CSS, neumorfismo e glassmorphism
Tre stili di ombra nello stesso strumento
Ombra standard e interna
Scostamenti da -50 a 50 px, blur fino a 100 px, spread, colore e opacità, con l'interruttore per l'ombra inset.
Neumorfismo calcolato in automatico
Dal colore di sfondo ricava l'ombra chiara e quella scura, entrambe con la stessa distanza e lo stesso blur; con Premuto diventano interne.
Glassmorphism con prefisso Safari
Genera sfondo semitrasparente, backdrop-filter, -webkit-backdrop-filter, bordo chiaro e ombra, con anteprima su un gradiente colorato.
Tre formati di export
Dichiarazione CSS completa, classe Tailwind e variabile --shadow da riusare in tutto il foglio di stile.
Anteprima su quattro elementi
Prova la stessa ombra su card, pulsante, campo di ricerca e cerchio, con sfondo chiaro o scuro.
19 preset pronti
Elevazioni Material, ombre stile iOS, card, glow, neon, focus ring e ombra interna, divisi in sette categorie.
Esempi di codice generato
Valori predefiniti di ciascuna modalità
Quando ti serve un'ombra CSS
Gli usi più frequenti nelle interfacce
Elevazione di card e modali
Un'ombra morbida e poco opaca stacca una card dallo sfondo senza appesantire il layout.
Glow e neon su pulsanti
Scostamenti a zero e blur alto con un colore acceso creano un alone luminoso invece di un'ombra direzionale.
Soft UI (neumorfismo)
Pulsanti e pannelli che sembrano in rilievo sullo sfondo, oppure incassati con la forma Premuto.
Pannelli in vetro smerigliato
Card in glassmorphism sopra una foto o un gradiente, con il prefisso -webkit- già incluso per Safari.
Verifica in modalità scura
Passa l'anteprima su sfondo scuro: un'ombra nera che funziona sul bianco spesso sparisce sul blu notte.
Errori comuni con box-shadow
Modificare a mano la classe Tailwind
La classe esportata usa la sintassi arbitraria shadow-[...], con il trattino basso al posto di ogni spazio. Copiala sempre con il pulsante: una modifica a mano rompe facilmente la sintassi.
Toccare un cursore dopo un preset a due livelli
Diversi preset (gran parte dei Material, Card MD/LG/XL, Neon Cyan) hanno due ombre separate da una virgola: vengono applicati per intero, ma i cursori mostrano solo il primo livello. Appena modifichi un cursore, il risultato torna a un'unica ombra.
Usare box-shadow su icone e PNG trasparenti
box-shadow segue il rettangolo dell'elemento, non la sagoma. Per icone e immagini scontornate serve filter: drop-shadow().
Neumorfismo con poco contrasto
Le ombre tenui del soft UI rendono i bordi dei controlli poco visibili. Controlla che testo e pulsanti restino leggibili e riconoscibili, soprattutto per chi vede meno bene.
Perché usare questo generatore di ombre CSS
Ombra classica, neumorfismo e glassmorphism stanno nello stesso strumento: per il soft UI non devi calcolare a mano le due ombre opposte, e per il vetro il prefisso -webkit-backdrop-filter è già nel codice.
Vedi l'effetto su quattro elementi diversi e su sfondo chiaro o scuro prima di copiare. Tutto gira nel browser, senza installare nulla e senza account.
box-shadow o filter: drop-shadow()?
Due modi di proiettare un'ombra
Domande frequenti
Accetta scostamento orizzontale, scostamento verticale, blur, spread e colore, più la parola chiave inset opzionale. Esempio: box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15). Valori negativi spostano l'ombra a sinistra o verso l'alto.
Riferimenti
Sintassi completa della proprietà con esempi e compatibilità dei browser (in inglese).
La proprietà alla base del glassmorphism, con le note sul prefisso per Safari (in inglese).
Come Google usa ombre e livelli per comunicare la profondità nelle interfacce (in inglese).
Strumenti correlati
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Flexbox Design Generatore CSS Flexbox gratuito: anteprima live, export Tailwind, CSS e React/JSX in schede, 11 layout predefiniti e proprietà dei singoli elementi incluse nel codice. Senza registrazione.
