Generatore di Box Shadow CSS
Generatore di box-shadow CSS online gratuito con anteprima dal vivo. Stratifica ombre multiple, scegli tra preset curati, attiva la modalità inset e copia istantaneamente il codice pronto per la produzione. Tutte le elaborazioni avvengono nel tuo browser.
Il tuo ad blocker ci impedisce di mostrare annunci
MiniWebtool è gratuito grazie agli annunci. Se questo strumento ti è stato utile, sostienici con Premium (senza annunci + più veloce) oppure inserisci MiniWebtool.com nella whitelist e ricarica la pagina.
- Oppure passa a Premium (senza annunci)
- Consenti gli annunci per MiniWebtool.com, poi ricarica
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
- 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.
- 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.
- 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.
- Copia il CSS — Fai clic su Copia per prelevare il codice
box-shadowgenerato e incollarlo direttamente nel tuo foglio di stile.
Comprendere la sintassi di box-shadow
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Spostamento orizzontale e verticale dell'ombra. I valori positivi spostano a destra/in basso; i valori negativi spostano a sinistra/in alto.
Controlla quanto è sfocata l'ombra. 0 produce un bordo netto; valori più alti creano un'ombra più morbida e diffusa.
Espande o contrae l'ombra. I valori positivi la rendono più grande; i valori negativi la rimpiccioliscono, utile per effetti sottili sotto l'elemento.
Quando presente, l'ombra viene disegnata all'interno dell'elemento. Comunemente usato per pulsanti premuti e campi di input incassati.
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.
Cita questo contenuto, pagina o strumento come:
"Generatore di Box Shadow CSS" su https://MiniWebtool.com/it// di MiniWebtool, https://MiniWebtool.com/
dal team di miniwebtool. Aggiornato: 2026-03-07