Generatore di box-shadow CSS — Ombre a livelli, neumorfismo e text-shadow
Crea effetti box-shadow e text-shadow a più livelli con anteprima dal vivo e preset per elevazione, neumorfismo e bagliore, poi copia il CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Funziona interamente nel tuo browser. Nulla di ciò che inserisci viene inviato a noi o conservato. Sfoglia tutti gli strumenti gratuiti.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Questo generatore di box-shadow CSS gratuito ti permette di disegnare le ombre a occhio e copiare il CSS box-shadow o text-shadow esatto. Sovrapponi tutti i livelli che ti servono, ciascuno con il proprio offset orizzontale e verticale, sfocatura, espansione, colore, opacità e impostazione inset, e osservali su una card di anteprima di cui puoi cambiare sfondo, colore e raggio degli angoli per adattarla al tuo design.
Le ombre realistiche non sono quasi mai un solo livello. Un'ombra netta e vicina insieme a una grande e tenue fanno percepire un oggetto sollevato dalla pagina, ed è così che funzionano i livelli di elevazione di Material Design; il neumorfismo invece richiede due ombre opposte su una card dello stesso colore dello sfondo. I preset coprono questi schemi, e le note più sotto spiegano la sintassi di box-shadow, perché i livelli rendono meglio e quanto costano le ombre in termini di prestazioni di rendering.
Come si usa
- Scegli Ombra del box o Ombra del testo.
- Parti da un preset oppure regola il livello selezionato con i cursori: offset, sfocatura, espansione, colore, opacità e inset.
- Aggiungi altri livelli con + Aggiungi livello (copia quello selezionato), seleziona un livello nell'elenco per modificarlo e riordina con le frecce. Il primo livello viene disegnato sopra.
- Adatta l'anteprima al tuo design: imposta lo sfondo della pagina, il colore della card e il raggio degli angoli.
- Copia il CSS oppure la classe Tailwind con valore arbitrario.
Domande frequenti
Cosa significano i valori di box-shadow?
box-shadow: inset? offset-x offset-y sfocatura espansione colore. L'offset x sposta l'ombra a destra (se negativo, a sinistra), l'offset y la sposta in basso (se negativo, in alto). La sfocatura indica quanto è morbido il bordo; 0 dà un bordo netto. L'espansione (spread) ingrandisce l'ombra prima della sfocatura (un valore negativo la riduce, ed è così che si evita che una sfocatura ampia si veda ai lati). Inset disegna l'ombra all'interno dell'elemento invece che all'esterno. Più ombre si separano con virgole, e la prima viene disegnata sopra.
Come si crea un'ombra morbida e realistica?
Sovrapponi due o più ombre a bassa opacità invece di una sola scura: un'ombra piccola e stretta per il bordo di contatto (0 1px 2px con circa il 10 percento di nero) e una più grande e morbida per la luce ambientale (0 8px 24px all'8–12 percento). Usa un'espansione leggermente negativa su quella grande così resta sotto l'elemento. Anche colorare l'ombra con una versione scura del colore di sfondo, invece del nero puro, dà un aspetto più naturale sulle pagine colorate.
Come si crea un effetto neumorfismo?
Dai all'elemento lo stesso colore di sfondo del suo contenitore, poi aggiungi due ombre: una più scura spostata in basso a destra e una più chiara (spesso bianca) spostata in alto a sinistra, per esempio 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) su #e0e5ec. Rendile inset per lo stato premuto. Usalo con cautela per i controlli: i pulsanti neumorfici hanno un contrasto molto basso rispetto allo sfondo e di solito non rispettano il requisito WCAG di 3:1 per i componenti dell'interfaccia, a meno di aggiungere un bordo o un contorno più marcato.
Che differenza c'è tra box-shadow e filter: drop-shadow()?
box-shadow segue il riquadro rettangolare dell'elemento, compreso il suo border-radius, e supporta spread e inset. filter: drop-shadow() segue i pixel visibili, quindi traccia il contorno di un PNG trasparente, di un'icona SVG o di una forma ritagliata, ma non ha spread né inset e accetta una sola ombra per funzione. Usa box-shadow per card e pulsanti, drop-shadow per immagini e icone dalla forma irregolare.
text-shadow può avere spread o inset?
No. text-shadow accetta solo offset x, offset y, sfocatura e colore. Per simulare un contorno, sovrapponi quattro o più ombre nette spostate di 1px in ogni direzione (il preset Contorno), oppure usa -webkit-text-stroke, ormai ampiamente supportato. Un'ombra del testo morbida e a bassa opacità può migliorare la leggibilità del testo bianco sopra le foto, ma non conta ai fini del contrasto WCAG.
Le ombre peggiorano le prestazioni?
Le ombre statiche costano poco. Raggi di sfocatura ampi diventano costosi quando vengono ridisegnati a ogni fotogramma, per esempio animando box-shadow all'hover su molte card. Il trucco classico è mettere l'ombra su uno pseudo-elemento e animarne invece l'opacità, che il browser può comporre sulla GPU senza ridisegnare la sfocatura.
Elevazione: una scala di ombre coerente
I design system definiscono pochi livelli di elevazione e usano solo quelli, così che 'quanto in alto' si trova un elemento abbia un significato: card al livello 1, menu a discesa al 2 o al 3, finestre di dialogo al 4 o al 5. I preset Elevazione qui seguono questo schema, ciascuno abbinando un'ombra stretta a una più ampia, entrambe crescenti con l'altezza.
• Livello 1, card a riposo ed elementi di elenco: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Livello 2, card in rilievo ed elementi in hover: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Livello 3, menu a discesa e popover: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Livelli 4 e 5, modali e finestre di dialogo: offset e sfocature maggiori, sempre sotto il 20 percento di opacità.
Memorizza i livelli come proprietà personalizzate CSS (da --shadow-1 a --shadow-5) o nel tema di Tailwind invece di incollare i valori nei componenti, così puoi regolare la scala in un unico punto.
Le ombre in modalità scura
Un'ombra nera su uno sfondo quasi nero è invisibile, quindi le interfacce scure mostrano l'elevazione in un altro modo: le superfici più alte ricevono colori di sfondo leggermente più chiari e le ombre, se mantenute, diventano più grandi e più opache. Un sottile bordo chiaro di 1px o un riflesso interno (inset 0 1px 0 rgba(255,255,255,0.06)) spesso rende meglio di qualsiasi ombra esterna. I bagliori, come il preset Bagliore, funzionano sugli sfondi scuri perché aggiungono luce invece di toglierla; riservali agli stati di focus e agli elementi da evidenziare, non a ogni card.
Strumenti gratuiti correlati
- Generatore di gradienti CSS — Crea gradienti lineari, radiali e conici con punti di colore trascinabili, una manopola per l'angolo e preset. Copia il CSS o una classe Tailwind.
- Generatore di palette di colori — Premi la barra spaziatrice per una nuova palette, blocca i colori che ti piacciono, scegli un'armonia o ricava la palette da una foto. Esporta in CSS, Tailwind, SCSS, JSON o PNG.
- Verifica contrasto — Controlla i colori di testo e sfondo secondo WCAG 2.x AA e AAA, leggi il valore APCA Lc e ottieni il colore più vicino che supera il test.
- Selettore e convertitore di colori — Preleva qualsiasi colore da qualsiasi punto dello schermo o converti all'istante tra HEX, RGB e HSL.