Strumento online gratuito per generare CSS box-shadow. Regola offset, sfocatura, diffusione, colore con anteprima in tempo reale. Copia codice. Elaborato nel browser.
Premi Ctrl+D per aggiungere questa pagina ai preferiti
Il Generatore di Box Shadow CSS è uno strumento online gratuito che modifica visivamente la proprietà box-shadow.
Sì, puoi aggiungere più ombre per creare profondità ed effetti complessi. Ogni ombra può essere regolata individualmente.
Un'ombra inset appare all'interno dell'elemento anziché all'esterno. Mentre la normale box-shadow appare all'esterno, aggiungere inset crea un effetto incassato, come premuto verso l'interno.
Le ombre reali non sono nere: sono il colore dello sfondo reso più scuro e si ammorbidiscono verso i bordi. Invece di una sola ombra nera al 30%, sovrapponi due o tre strati tenuissimi con raggi di sfocatura diversi — per esempio 1 px aderente al bordo, 8 px dietro e una molto lieve da 24 px più esterna. Immagina la luce dall'alto: dai all'ombra solo uno scostamento verticale e lascia a zero quello orizzontale.
In un layout statico il costo è trascurabile, ma cambia tutto nel momento in cui animi. Far transitare il valore box-shadow al passaggio del mouse obbliga il browser a ricalcolare la sfocatura a ogni fotogramma, con scatti evidenti sui dispositivi poco potenti. Se ti serve un'ombra che cresce all'interazione, anima piuttosto l'opacità o il transform di un livello d'ombra già disegnato: il risultato è molto più fluido.