Generatore di box shadow
Sovrapponi qualche livello delicato per ombre dall’aspetto naturale, poi copia il CSS.
Sigillato su questo dispositivo
Funziona nel tuo browser. Non viene caricato nulla.
Sigillato
Anteprima
Livelli dell’ombra
Ancora nessuna ombra. Aggiungi un livello per iniziare.
Codice CSS
Come funziona
-
Parti da un preset
Scegli un’ombra morbida, a livelli, sospesa, netta o interna come punto di partenza.
-
Regola i livelli
Regola spostamento, sfocatura, espansione, colore e opacità di ogni livello, e aggiungi o rimuovi livelli. L’anteprima si aggiorna man mano.
-
Copia il CSS
Copia la dichiarazione box-shadow e incollala nel tuo foglio di stile.
Domande frequenti
A cosa servono sfocatura ed espansione?
La sfocatura (blur) ammorbidisce il bordo dell’ombra: più alto è il valore, più è diffusa. L’espansione (spread) ingrandisce o riduce l’ombra prima di applicare la sfocatura. Un’espansione negativa con una sfocatura ampia dà l’effetto morbido e sollevato tipico delle interfacce moderne.
Perché usare più livelli di ombra?
Le ombre reali hanno un nucleo scuro e compatto vicino all’oggetto e un alone morbido e ampio più lontano. Sovrapporre un livello piccolo e netto a uno o due livelli più grandi e chiari riproduce questo effetto ed è molto più naturale di un’ombra singola.
Cos’è un’ombra inset?
Un’ombra inset viene disegnata all’interno dell’elemento invece che all’esterno. Fa sembrare una superficie incassata, ed è ideale per campi di input o pulsanti premuti.
L’ombra funziona in tutti i browser?
Sì. box-shadow, i livelli multipli e la sintassi colore rgb() usata nel codice sono supportati da tutti i browser attuali.
Una box shadow rallenta la mia pagina?
Le ombre statiche costano poco da disegnare. Sfocature molto ampie su molti elementi, o l’animazione dell’ombra stessa, possono costare di più. Per animare un’ombra in modo fluido, fai invece variare l’opacità di uno pseudo-elemento che porta l’ombra.