Colori e design
Generatore di box-shadow
L’ombra perfetta con i cursori, il codice CSS in un clic.
Un’ombra ben calibrata dà rilievo a una card, stacca un pulsante dallo sfondo, dà gerarchia a un’interfaccia — ma scrivere a mano un valore box-shadow è un tirare a indovinare. Qui si regola tutto con i cursori: offset orizzontale e verticale, raggio di sfocatura, estensione, opacità dell’ombra, più una casella per passare all’ombra interna (inset). L’anteprima — una card su sfondo neutro — riflette ogni regolazione dal vivo, esattamente come la renderà il tuo browser. Quando il risultato ti convince, copi la dichiarazione CSS completa in un clic e la incolli nel foglio di stile o nel design system. Gratis, senza registrazione, tutto nel tuo browser.
Come funziona?
- Imposta gli offset orizzontale (X) e verticale (Y).
- Regola sfocatura, estensione e opacità dell’ombra.
- Attiva « inset » se vuoi un’ombra interna.
- Copia il codice CSS generato in un clic.
Domande frequenti
Come ottengo un’ombra naturale e discreta?
Offset verticale leggero (da 2 a 8 px), offset orizzontale nullo o minimo, sfocatura generosa (due-tre volte l’offset), opacità bassa (dall’8 al 20 %). La luce viene dall’alto, quindi l’ombra cade verso il basso.
A cosa serve il parametro estensione (spread)?
Allarga (valore positivo) o restringe (valore negativo) l’ombra prima che venga applicata la sfocatura. Un’estensione negativa crea ombre compatte molto eleganti; una positiva con sfocatura zero disegna un bordo pieno.
Quando usare un’ombra interna (inset)?
Per un effetto incassato: campi di testo, pulsanti premuti, pannelli in rilievo negativo. L’ombra viene disegnata all’interno dell’elemento invece di proiettarsi dietro di lui.
Le ombre penalizzano le prestazioni?
Una box-shadow statica è ottimizzata benissimo dai browser. Evita solo di animare in continuo la sfocatura su superfici estese — per le transizioni, anima piuttosto l’opacità di uno pseudo-elemento che porta l’ombra.