Generatore di box-shadow CSS
Funziona sul tuo dispositivo. Nulla viene inviato.Tutto funziona nel tuo browser: non viene inviato nulla.
Parti da
Livelli
Spostamento orizzontale
Spostamento verticale
Sfocatura
Espansione
Colore
Codice
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Modifica un'ombra esistente
Crea ombre CSS con livelli, inset e preset morbidi, guardale dal vivo e copia il CSS o una classe Tailwind. Incolla un'ombra esistente per modificarla.
Costruisci l'ombra che vuoi a occhio invece di indovinare i numeri. Parti da un preset - morbida, media, netta retrò, morbida a livelli, sospesa, interna, neumorfica o bagliore - poi regola spostamento, sfocatura, espansione, colore, opacità e inset di ogni livello mentre l'anteprima si aggiorna. Un'ombra può avere fino a otto livelli: è così che si ottengono le ombre più naturali. Copia il risultato come CSS o come classe Tailwind, condividilo con un link oppure incolla un box-shadow dal tuo foglio di stile per continuare a lavorarci.
Domande frequenti
Cosa fanno sfocatura ed espansione?
La sfocatura ammorbidisce il bordo dell'ombra: 0 è una linea netta, valori maggiori la sfumano su più pixel. L'espansione ingrandisce (positiva) o rimpicciolisce (negativa) l'ombra prima della sfocatura: una piccola espansione negativa con molta sfocatura dà le ombre morbide e raccolte delle interfacce moderne.
Perché usare più livelli?
Le ombre vere sono scure e nette vicino all'oggetto e più chiare e morbide allontanandosi. Un solo livello non può fare entrambe le cose; sovrapporne alcuni con spostamento e sfocatura che raddoppiano, come il preset «Morbida a livelli», è molto più naturale.
Cos'è un'ombra inset?
Un'ombra inset viene disegnata dentro il riquadro invece che fuori, così sembra premuto verso l'interno: utile per campi di testo, incavi e pulsanti premuti. Si possono mescolare livelli interni ed esterni nella stessa ombra.
box-shadow rallenta la pagina?
Poche ombre costano poco. Sfocature molto grandi su molti elementi, o animare il box-shadow stesso, possono abbassare i frame sui telefoni lenti; per animare, cambia l'opacità di uno pseudo-elemento che ha già l'ombra.