Generatore di box-shadow CSS
La dichiarazione, non una tela da trascinare.
- ombre
- 1
Risultato
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Ciò che incolli viene elaborato sul tuo dispositivo e non viene mai inviato a un server, quindi puoi usarlo in sicurezza con token, chiavi e testi non pubblicati.
Come funziona
- Usa i cursori per una sola ombra, oppure scrivine una per riga per sovrapporne più d’una.
- Una riga è «x y sfocatura estensione colore»: ogni numero omesso vale zero.
- Passa a text-shadow se a ricevere l’ombra è del testo.
- 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. La pagina te lo dice quando hai scritto un quarto numero, invece di lasciarlo cadere in silenzio come fa un browser.
- 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.
Strumenti correlati
◒ Generatore di gradienti CSS Colori da una parte, una dichiarazione dall’altra. ◒ Convertitore di colore HEX, RGB, HSL e CMYK — più il rapporto di contrasto che decide la leggibilità. ◒ Formattatore CSS Una dichiarazione per riga — o l’intero file su una sola. ◐ Verifica del contrasto Se qualcuno riesce davvero a leggerlo.