Esempi di CSS box-shadow: 40 ombre da copiare in CSS o Tailwind
40 esempi originali di box-shadow che puoi vedere in anteprima e copiare come CSS o classe Tailwind: morbide, a livelli, solo in basso, inset, colorate, per la dark mode e una scala di elevazione.
Un'ombra si scrive come box-shadow: x-offset y-offset blur spread color, con la parola chiave inset facoltativa. Le ombre morbide e realistiche di solito sovrappongono due o tre livelli a bassa opacità, mentre un'ombra solo in basso usa un offset y positivo con uno spread negativo. Scegli uno qualsiasi dei 40 esempi qui sotto e copialo in CSS o Tailwind.
Le cinque parti di un valore box-shadow
Parte
Esempio
Cosa fa
offset x
Sposta l'ombra a destra (positivo) o a sinistra (negativo)
offset y
Sposta l'ombra in basso (positivo) o in alto (negativo)
raggio di blur
Ammorbidisce il bordo; non può essere negativo; 0 dà un bordo netto
raggio di spread
-6px
Allarga (positivo) o restringe (negativo) l'ombra prima della sfocatura
rgb(0 0 0 / 0.15)
Se omesso, usa il colore del testo dell'elemento
Disegna l'ombra all'interno del bordo invece che all'esterno
La maggior parte delle raccolte di ombre ti dà un'immagine e una riga di CSS. Questa ti spiega anche perché un'ombra sembra vera o finta, ti offre una scala di elevazione coerente da inserire in un design system e mostra come mantenere le ombre visibili su sfondi scuri. Ogni esempio è originale e gira dal vivo nel tuo browser.
Filtra la galleria per stile, per esempio a livelli, solo in basso, inset o colorate.
Ogni card mostra l'ombra su una superficie reale. Passa allo sfondo scuro per vedere come regge.
Clicca una card per copiarla. Usa il selettore per scegliere CSS semplice o una classe arbitraria di Tailwind.
Per un intero prodotto, copia i token di elevazione più in basso invece delle singole ombre.
Usa uno spread negativo con un offset y più grande per tenere l'ombra sotto l'elemento e lontana dai lati.
Colora le ombre con una versione scura della tinta dello sfondo invece del nero puro, per un risultato meno sporco.
Quando il sollevamento all'hover scatta, anima l'opacità di uno pseudo-elemento che porta l'ombra più grande invece di animare direttamente box-shadow.
box-shadow segue il border-radius, quindi le card arrotondate hanno ombre arrotondate senza lavoro in più.
Domande frequenti
Come aggiungo un box shadow solo in basso?
Dai all'ombra un offset y positivo e uno spread negativo più o meno grande quanto il blur, per esempio box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). Lo spread negativo ritira l'ombra da sinistra, destra e dall'alto, quindi si vede solo la parte spinta oltre il bordo inferiore.
Come uso più di un'ombra?
Separa le ombre con delle virgole. La prima ombra dell'elenco viene disegnata sopra le altre, quindi metti per prima l'ombra di contatto stretta e più scura e per ultima quella ambientale ampia e tenue.
Perché la mia ombra sparisce su uno sfondo scuro?
Un'ombra nera su una pagina quasi nera non ha quasi contrasto. Nei temi scuri, affidati a un colore di superficie più chiaro per gli elementi in rilievo, aggiungi un sottile bordo chiaro o un riflesso inset da 1px e aumenta l'opacità dell'ombra invece di contare solo sull'ombra.
Qual è la differenza tra box-shadow e drop-shadow()?
box-shadow segue il box dell'elemento e il suo border-radius. filter: drop-shadow() segue i pixel visibili, quindi aderisce ai PNG trasparenti e alle forme SVG, ma non ha un valore di spread né l'opzione inset.
Come scrivo un'ombra personalizzata in Tailwind?
Usa un valore arbitrario con i trattini bassi al posto degli spazi, come shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. La scala predefinita va da shadow-2xs a shadow-2xl, mentre inset-shadow-sm e le classi simili coprono le ombre interne.
Perché le ombre a livelli sembrano più reali
Gli oggetti reali proiettano due tipi di ombra insieme: una piccola e scura proprio dove toccano la superficie e una ampia e chiara dovuta alla luce che rimbalza nella stanza. Una singola ombra sfocata cerca di essere entrambe e finisce per sembrare un alone grigio.
Sovrapporre da due a quattro livelli, ciascuno con offset e blur circa doppi rispetto al precedente e un'opacità più bassa, imita quella combinazione. Il costo è ridotto, ma valori di blur molto grandi su molti elementi possono rallentare lo scorrimento sui dispositivi poco potenti, quindi limita le ombre pesanti a poche superfici in rilievo.
Le ombre come scala, non come caso isolato
Un prodotto sembra coerente quando ogni elemento in rilievo sceglie da una breve scala: card a riposo, card in hover, menu a tendina, finestre di dialogo. Salva ogni gradino come custom property e riusalo, così se in seguito cambi la direzione della luce modifichi un solo punto.
Fai crescere l'offset y più velocemente dell'offset x, che resta a zero con una sorgente di luce direttamente sopra. Mescolare direzioni di luce diverse tra i componenti è uno dei modi più rapidi per far sembrare un'interfaccia assemblata da pezzi.
Box shadow solo in basso
Uno spread negativo restringe l'ombra su ogni lato, poi l'offset y la spinge fuori verso il basso. Mantieni lo spread vicino al valore negativo del blur così nulla fuoriesce dai bordi sinistro e destro.
Tre ombre solo in basso
Da sinistra: un bordo netto, un'ombra più morbida e la linea sottile usata sotto gli header sticky.
Una scala di elevazione riutilizzabile
Cinque gradini coprono la maggior parte delle interfacce. Ognuno raddoppia offset e blur del precedente e mantiene sotto un livello di contatto stretto.
Token di elevazione con override per il tema scuro
I componenti usano var(--shadow-2) e non scrivono mai un'ombra a mano. Il blocco scuro sostituisce con un bordo tenue più un nero più profondo.
Ombra singola e ombra a livelli
Stessa dimensione, realismo diverso
La card a sinistra usa un unico blur grande. La card a destra distribuisce la stessa intensità su tre livelli, e il risultato è un rilievo più morbido e naturale.