Generatore di Box Shadow CSS

Generatore di Box Shadow CSS

Il Generatore di Box Shadow CSS ti consente di progettare visivamente gli effetti box-shadow e copiare istantaneamente il CSS pronto per la produzione. Sovrapponi più livelli di ombra, scegli tra preset curati ispirati a Material Design, Tailwind CSS e Neumorfismo, oppure trascina direttamente sull'anteprima per posizionare l'ombra. Tutto viene eseguito nel tuo browser: il tuo codice non lascia mai la pagina.

Come utilizzare il Generatore di Box Shadow CSS

1. Regola i controlli dell'ombra — Usa gli slider per impostare l'offset orizzontale (X), l'offset verticale (Y), il raggio di sfocatura (blur) e il raggio di diffusione (spread). Puoi anche trascinare direttamente sull'area di anteprima per riposizionare l'ombra in modo intuitivo.
2. Scegli colore e opacità — Scegli un colore per l'ombra con il selettore colore e perfeziona la trasparenza con lo slider dell'opacità. L'anteprima si aggiorna in tempo reale.
3. Aggiungi più livelli o preset — Fai clic su + Aggiungi livello ombra per sovrapporre le ombre e ottenere una profondità realistica. Oppure seleziona un preset curato (Material, Tailwind, Neumorfismo, ecc.) per iniziare con un design collaudato.
4. Copia il CSS — Fai clic su Copia per prelevare il codice box-shadow generato e incollarlo direttamente nel tuo foglio di stile.

Comprendere la sintassi di box-shadow

Suggerimenti per Box Shadow professionali

• Stratifica più ombre — Gli oggetti reali proiettano ombre complesse. L'uso di 2-3 livelli (un livello ambientale morbido + un livello di luce principale più nitido) produce risultati molto più realistici di una singola ombra.
• Usa una bassa opacità — Le ombre con un'opacità dell'8-20% appaiono naturali. Evita ombre nere ad alta opacità, che possono apparire pesanti e datate.
• Abbina la direzione della luce — Mantieni gli offset delle ombre coerenti in tutta l'interfaccia utente per simulare un'unica fonte di luce. Ombre incoerenti rompono l'illusione visiva.
• Ombre colorate — Invece del nero, prova a usare una tonalità più scura del colore di sfondo dell'elemento per un aspetto più coeso e moderno.
• Diffusione negativa (Negative spread) — Un valore di spread negativo restringe l'ombra rendendola più piccola dell'elemento, creando una sottile ombra di contatto che fissa gli elementi a terra senza bordi visibili.

Stili di ombra popolari spiegati

• Material Design Elevation — Utilizza due livelli di ombra: un'ombra ambientale più morbida e un'ombra principale più nitida. Diversi livelli di elevazione (1-5) aumentano progressivamente l'offset e la sfocatura.
• Utility di Tailwind CSS — Tailwind fornisce classi come shadow, shadow-md, shadow-lg, shadow-xl e shadow-2xl, ognuna delle quali utilizza ombre a due livelli ottimizzate per casi d'uso comuni di schede e modali.
• Neumorfismo — Crea un effetto plastica morbida ed estrusa utilizzando due ombre opposte (una chiara, una scura). Funziona meglio su sfondi grigio chiaro dove entrambe le ombre sono visibili.
• Glassmorfismo — Abbina un'ombra sottile con la sfocatura backdrop-filter e sfondi semitrasparenti. L'ombra aggiunge profondità sotto l'effetto vetro satinato.

Domande frequenti

Cos'è la proprietà CSS box-shadow?

La proprietà CSS box-shadow aggiunge effetti di ombra attorno alla cornice di un elemento. Accetta valori per offset orizzontale, offset verticale, raggio di sfocatura, raggio di diffusione e colore. Più ombre possono essere separate da virgole per creare effetti di profondità stratificati.

Come posso creare più box shadow in CSS?

Le ombre multiple si creano separando ogni definizione di ombra con una virgola. Ad esempio: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Ogni ombra viene renderizzata sopra la precedente, con la prima ombra che appare in cima.

Qual è la differenza tra box-shadow e drop-shadow?

box-shadow applica l'ombra al box rettangolare di un elemento, mentre filter: drop-shadow() segue la forma effettiva includendo le aree trasparenti. box-shadow supporta il raggio di diffusione e la modalità inset, che drop-shadow non fa. Per elementi rettangolari standard, box-shadow è più comunemente usato e offre prestazioni migliori.

Cos'è una box shadow inset?

Un'ombra box inset appare all'interno dell'elemento invece che all'esterno. Si crea aggiungendo la parola chiave inset prima dei valori dell'ombra. Le ombre interne sono comunemente usate per effetti di pulsanti premuti, styling dei campi di input e per creare aspetti incassati o incisi.

Quali sono dei buoni valori di box-shadow per un effetto scheda sottile?

Un'ombra popolare e sottile per schede utilizza due livelli: 0 1px 3px rgba(0,0,0,0.12) per l'ombra vicina e 0 1px 2px rgba(0,0,0,0.24) per la definizione. Tailwind CSS utilizza 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) per la sua utility di ombra predefinita.