Generatore di ombre CSS (box-shadow)
Regola un'ombra con i cursori e un'anteprima in diretta, poi copia il CSS. L'opzione a più livelli aggiunge una leggera ombra di contatto per un risultato più naturale e attuale.
Non servono dati
Come si usa
- Regola scostamento, sfocatura, estensione e opacità.
- Scegli il colore dell'ombra.
- Attiva le ombre interne (inset) o a più livelli.
- Copia il CSS.
Come funziona
La proprietà box-shadow accetta uno scostamento orizzontale e uno verticale, un raggio di sfocatura, un raggio di estensione e un colore. Un'estensione negativa rimpicciolisce l'ombra ed evita l'effetto «alone» pesante. Sovrapporre un'ombra stretta e poco opaca sotto una più ampia e morbida imita il modo in cui la luce reale produce sia un'ombra di contatto sia un'ombra ambientale.
Esempi
- Scheda
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Usi comuni
- Schede, finestre modali e menù a discesa
- Pulsanti e stati al passaggio del mouse
- Design system
Privacy e sicurezza
Questo strumento non richiede nessun dato personale e nessun file. I risultati vengono generati sul tuo dispositivo. Come ogni strumento tratta i file
Domande frequenti
box-shadow incide sulle prestazioni?
Le ombre grandi e sfocate possono pesare quando vengono animate. Anima l'opacità di uno pseudo-elemento invece dell'ombra stessa.
Posso applicarla al testo?
Per il testo usa text-shadow: non ha il valore di estensione.
Ultimo aggiornamento: