box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Generatore Online Gratuito di Ombre CSS — Costruttore Visivo di Ombre

Progetta ombre CSS bellissime in modo visivo con anteprima in tempo reale. Questo generatore gratuito di ombre CSS supporta più strati, preset, ombre interne e genera immediatamente il codice CSS pronto all'uso.

Cosa è un Generatore di Ombre CSS?

Un generatore di ombre CSS è uno strumento visivo che aiuta gli sviluppatori web e i designer a creare valori box-shadow senza dover scrivere manualmente i valori in pixel. Invece di indovinare numeri e rinfrescare il browser, puoi regolare i cursori e vedere il risultato in tempo reale.

La proprietà CSS box-shadow aggiunge effetti di ombra intorno al bordo di un elemento. È una delle proprietà CSS più utilizzate per creare profondità, elevazione e gerarchia visiva nelle interfacce web moderne.

Come Usare Questo Generatore di Ombre CSS

1. Scegli un preset — Inizia con un'ombra sottile, media o forte, o inizia da zero.
2. Regola i cursori — Controlla lo spostamento X, lo spostamento Y, la sfocatura, la diffusione, il colore e l'opacità.
3. Attiva l'opzione 'inset' — Passa tra un'ombra esterna e un'ombra interna.
4. Aggiungi strati — Sovrapponi più ombre per effetti complessi.
5. Personalizza l'anteprima — Cambia lo sfondo e il colore della casella per adattarti al tuo design.
6. Copia il CSS — Clicca il pulsante di copia e incolla il codice nel tuo foglio di stile.

Funzionalità Principali

Funzionalità	Vantaggio
Anteprima in tempo reale	Vedi i cambiamenti immediatamente mentre regoli i cursori
6 preset	Inizio rapido con stili comuni di ombre
Più strati	Sovrapponi ombre per effetti complessi e realistici
Supporto per ombre interne	Crea ombre interne per elementi incavati
Selettore di colore	Controllo completo del colore dell'ombra
Controllo dell'opacità	Regola con precisione la trasparenza dell'ombra
Copia negli appunti	Esportazione del CSS con un clic

Comprendere l'Ombra CSS

Sintassi

La proprietà CSS box-shadow segue questa sintassi:

box-shadow: [inset] offsetX offsetY blur spread color;

Valore	Descrizione	Esempio
inset	(Opzionale) Crea un'ombra interna	inset
offsetX	Spostamento orizzontale — positivo = destra, negativo = sinistra	4px
offsetY	Spostamento verticale — positivo = giù, negativo = su	4px
blur	Raggio di sfocatura — maggiore = ombra più morbida	12px
spread	Espansione della dimensione — positivo = più grande, negativo = più piccolo	0px
color	Colore dell'ombra con trasparenza alfa	rgba(0,0,0,0.1)

Ombre Multiple

Puoi sovrapporre più ombre separandole con virgole:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

Questo crea un'ombra a due strati: un'ombra stretta e scura vicino all'elemento e un'ombra più morbida e leggera che si estende più lontano — creando un effetto di profondità più realistico.

Confronto di Stili di Ombre

Stile	CSS	Caso d'uso
Sottile	0 1px 3px rgba(0,0,0,0.08)	Cartelle, elementi di elenco
Media	0 4px 6px rgba(0,0,0,0.1)	Pulsanti, modali
Forte	0 10px 15px rgba(0,0,0,0.15)	Dialoghi, popovers
Glow	0 0 20px rgba(59,130,246,0.4)	Stati di focus, CTA
Interna	inset 0 2px 4px rgba(0,0,0,0.1)	Input, beni
Dura	4px 4px 0 rgba(0,0,0,0.25)	UI retroguida/brutale

Caso d'uso Reale

Elevazione del Design Material

Il Design Material utilizza ombre per indicare livelli di elevazione. Una carta di livello 1 utilizza 0 1px 3px rgba(0,0,0,0.12), mentre un dialogo di livello 4 utilizza 0 12px 17px rgba(0,0,0,0.14).

Effetti su Hover

Profondi l'ombra su hover per creare un effetto di "sollevamento":

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

Stati di focus

Utilizza un glow colorato per indicatori di focus accessibili:

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Neumorfismo

Combinare ombre interne e esterne con lo stesso colore dello sfondo per un aspetto morbido e sporgente.

Consigli per Ombre Migliori

Consiglio	Spiegazione
Mantieni la sfocatura sottile	Una sfocatura eccessiva sembra innaturale. Inizia con 4–12px per la maggior parte degli elementi UI.
Usa bassa opacità	Le ombre nella vita reale non sono completamente opache. 5–15% di opacità sembra più naturale.
Adatta lo sfondo	Su sfondi scuri, usa colori di ombra più chiari o glow colorati invece del nero.
Strati per realismo	Un'ombra a due strati (stretta + morbida) sembra più realistica di una singola ombra.
Diffusione negativa	Una piccola diffusione negativa (-1 a -2px) impedisce all'ombra di estendersi oltre i bordi dell'elemento.
Evita ombre dure sul testo	Usa text-shadow con sfocatura per il testo, mai offset duri.

Domande Frequenti

Posso animare box-shadow?

Sì, puoi animare box-shadow utilizzando proprietà CSS come transition o animation. Tuttavia, l'animazione delle ombre potrebbe non essere supportata in tutti i browser o potrebbe comportare un impatto sulle prestazioni.

Cosa succede se non specifico alcun valore per box-shadow?

Se non specifichi alcun valore per box-shadow, l'ombra non verrà applicata all'elemento. Il valore predefinito è none, che rimuove qualsiasi ombra precedentemente definita.

Posso utilizzare box-shadow insieme ad altri effetti di ombra come text-shadow?

Sì, puoi utilizzare box-shadow insieme ad altri effetti di ombra come text-shadow. Tuttavia, i due effetti non sono direttamente correlati e vengono applicati separatamente all'elemento.