Come si costruisce una buona ombra CSS
La proprietà box-shadow disegna un’ombra attorno a un elemento. È la base della profondità nelle interfacce: card che sembrano sollevate, pulsanti che reagiscono al passaggio del mouse, modali che si staccano dallo sfondo. Un’ombra sola, scura e netta, però sembra spesso artificiale; le ombre più realistiche nascono dalla combinazione di più livelli.
Questo generatore ti permette di aggiungere tutti i livelli che vuoi. Per ognuno regoli l’offset orizzontale e verticale, la sfocatura (blur), l’espansione (spread), il colore e l’opacità, e puoi renderlo interno con inset. Un classico è unire un’ombra stretta e definita vicino all’elemento con una ampia e molto sfocata più lontana.
Se vuoi partire da una base, ci sono preset per ombre morbide, elevate, nette, interne e uno stile simile al neumorphism. L’anteprima mostra un box su uno sfondo di cui puoi cambiare il colore, insieme al colore del box: un’ombra che funziona su bianco può sparire su grigio, quindi conviene provarla sul colore reale del tuo design.
Le ombre più credibili seguono una sorgente di luce coerente: offset verticale positivo, come se la luce venisse dall’alto, e colori con bassa opacità invece del nero pieno. Mantieni la stessa direzione in tutta l’interfaccia e usa ombre più grandi e sfocate per gli elementi che devono sembrare più in alto.
Il codice viene generato come proprietà box-shadow, con tutti i livelli separati da virgole, pronto da copiare. Tutto avviene nel tuo browser e il generatore è gratuito, senza limiti.
Come creare un box-shadow
- Parti da un preset o dal livello d’ombra predefinito.
- Regola offset X e Y, sfocatura, espansione, colore e opacità; attiva inset per un’ombra interna.
- Aggiungi altri livelli per un effetto più realistico.
- Cambia il colore dello sfondo e del box per provare l’ombra sul tuo design.
- Copia il CSS box-shadow.
Dove usare box-shadow
- Card e pannelli che sembrano sollevati dalla pagina.
- Stati hover e focus dei pulsanti.
- Finestre modali, menu a tendina e tooltip.
- Campi di input con ombra interna (inset).
- Interfacce in stile neumorphism.
- Contorni sottili senza cambiare le dimensioni dell’elemento, con spread e blur a zero.
I valori di box-shadow, in ordine
- offset-x: spostamento orizzontale; positivo verso destra.
- offset-y: spostamento verticale; positivo verso il basso.
- blur: sfocatura; 0 dà un bordo netto, valori alti un’ombra diffusa.
- spread: allarga (positivo) o restringe (negativo) l’ombra prima della sfocatura.
- colore: meglio con trasparenza, per esempio rgba(0, 0, 0, 0.15).
- inset: opzionale, porta l’ombra all’interno dell’elemento.
Domande Frequenti
È gratis?
Sì. Il generatore di box-shadow è gratuito e senza limiti: anteprima dal vivo e copia del CSS quante volte vuoi.
Posso combinare più ombre?
Sì. Aggiungi tutti i livelli che vuoi; nel CSS vengono separati da virgole.
Cos’è un’ombra inset?
Un’ombra disegnata all’interno dell’elemento invece che all’esterno, come se fosse incassato. Si usa spesso per i campi di input.
Che differenza c’è tra blur e spread?
Il blur sfuma i bordi dell’ombra; lo spread la allarga o la restringe prima di sfumarla.
box-shadow rallenta la pagina?
In genere no. Ombre molto grandi e sfocate animate su molti elementi possono pesare sul rendering; in quel caso conviene animare l’opacità di uno pseudo-elemento.