Generatore di box-shadow CSS

Come funziona

1. Usa i cursori per una sola ombra, oppure scrivine una per riga per sovrapporne più d’una.
2. Una riga è «x y sfocatura estensione colore»: ogni numero omesso vale zero.
3. Passa a text-shadow se a ricevere l’ombra è del testo.
4. Copia la dichiarazione.

Domande frequenti

Perché dovrei volere più di un’ombra?

Perché una sola quasi mai viene bene. Un’ombra vera è un bordo scuro stretto più un alone ampio e morbido; sovrapporne due o tre con sfocature e opacità diverse è ciò che fa sembrare una scheda staccata dalla pagina anziché contornata.

Che cosa fa l’estensione?

Ingrandisce o restringe l’ombra prima della sfocatura. Un’estensione negativa la raccoglie: è così che si ottiene un’ombra che sta sotto l’elemento senza debordare ai lati.

Perché l’estensione del mio text-shadow viene ignorata?

Perché text-shadow non ha estensione: accetta solo x, y, sfocatura e colore, e se trova una quarta lunghezza il browser scarta l’intera dichiarazione, quindi non si vede nessuna ombra. La pagina toglie quel numero dal CSS e lo segnala con una nota sotto.

Che cos’è «verso l’interno»?

Disegna l’ombra dentro il riquadro anziché fuori, ed è così che si fa sembrare qualcosa premuto dentro. Vale solo per box-shadow.

Viene inviato qualcosa a un server?

No. Gira nel browser: quello che scrivi resta sul tuo computer.