Generatore box-shadow
Crea ombre CSS multilivello con anteprima dal vivo.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Ombre con vera profondità, senza tentativi
Regolare un’ombra a mano significa ricaricare la pagina dieci volte. Qui muovi i cursori e l’anteprima reagisce dal vivo. Sovrapponi più livelli per una profondità realistica e copia il CSS esatto.
-
Regola il livello
Scostamento X/Y, sfocatura, estensione, colore e opacità.
-
Aggiungi livelli
Mescola un’ombra netta e una diffusa per un effetto naturale.
-
Copia il CSS
La proprietà box-shadow completa, pronta da incollare.
Capire la sintassi
| Valore | Ruolo |
|---|---|
| offset-x | Scostamento orizzontale (destra se positivo) |
| offset-y | Scostamento verticale (basso se positivo) |
| blur | Raggio di sfocatura (più grande = più morbido) |
| spread | Ingrandisce (+) o restringe (−) l’ombra |
| color | Colore, spesso rgba() per l’opacità |
| inset | Mette l’ombra all’interno della box |
Tutto è generato nel tuo browser. Esempio predefinito: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Domande frequenti
Cosa significano i valori di box-shadow?
In ordine: scostamento orizzontale, scostamento verticale, raggio di sfocatura, raggio di estensione e poi il colore. Esempio: «0 10px 25px -5px rgba(124, 58, 237, 0.35)» sposta l’ombra di 10px in basso, la sfoca di 25px e la restringe di 5px.
A cosa serve il raggio di estensione (spread)?
Ingrandisce (valore positivo) o restringe (valore negativo) l’ombra prima della sfocatura. Uno spread negativo è ottimo per ombre morbide e raccolte, come una scheda che fluttua leggermente sopra la pagina.
Come sovrappongo più ombre?
Separa ogni livello con una virgola. Il primo elencato è disegnato sopra. Combinare un’ombra netta e stretta con una ampia e diffusa risulta molto più naturale di una sola ombra.
Che differenza c’è tra box-shadow e drop-shadow?
box-shadow segue il rettangolo della box (e il suo border-radius). filter: drop-shadow() segue la forma reale, trasparenza inclusa — ideale per PNG ritagliati e SVG. Per una scheda o un pulsante, box-shadow è la scelta giusta.