Generatore CSS box-shadow (ombre dei riquadri)

Strumento gratuito che genera il box-shadow dei CSS con anteprima, regolando con i cursori scostamento, sfocatura, diffusione, colore e opacità. Il codice prodotto si copia con un clic.

Ultimo aggiornamento: 2026-10-18

Che cosa fa box-shadow

La proprietà CSS box-shadow proietta un'ombra da un elemento. Il suo valore elenca, in quest'ordine, lo scostamento orizzontale, quello verticale, il raggio di sfocatura, il raggio di espansione e il colore; ma quattro numeri di seguito, con una differenza fra sfocatura ed espansione che le parole faticano a rendere, ne fanno una proprietà faticosa da scrivere a mano. Questo strumento le consente di muovere ciascun valore con un cursore e di vedere il risultato all'istante.

Ciò che dà carattere a un'ombra è la combinazione più che le grandezze. Le ombre che risultano naturali tengono lo scostamento piccolo, la sfocatura ampia e l'opacità bassa; allontanando lo scostamento e alzando l'opacità si ottiene qualcosa di duro, come ritagliato e incollato. Aggiungere inset proietta invece l'ombra all'interno dell'elemento, con un effetto incassato. Il codice generato si copia con un clic e tutto viene eseguito nel suo browser.

Come comporre un'ombra

Fissi gli scostamenti Così stabilisce la direzione apparente della luce. Tenere X a zero e Y leggermente positivo risulta di solito naturale.
Regoli il raggio di sfocatura È la morbidezza del bordo dell'ombra. Valori alti la distribuiscono più ampia e tenue.
Regoli il raggio di espansione Ingrossa o assottiglia l'ombra stessa. A differenza della sfocatura, non cambia la durezza del bordo.
Scelga colore e opacità Il nero semitrasparente è la scelta sicura, ma un tono scuro vicino allo sfondo, steso con discrezione, si integra meglio.
Copi il codice Incolli il valore box-shadow generato direttamente nel suo foglio di stile.

Consigli per sfruttarlo al meglio

Oltre ai cursori potete digitare direttamente i valori: comodo quando serve un numero preciso.
Attivando «inset» l'ombra viene disegnata all'interno dell'elemento, con l'effetto di una superficie incavata.
Aumentando lo spread si allarga tutto il contorno dell'ombra, mentre aumentando il blur il contorno sfuma e l'impressione diventa più morbida.
Più si abbassa l'opacità, più l'ombra risulta leggera e naturale, e più lo sfondo resta percepibile nelle composizioni con elementi sovrapposti.
Il CSS generato si incolla direttamente nel foglio di stile. Provate ad abbinarlo agli effetti al passaggio del mouse su pulsanti e schede.

Quando torna utile

Dare profondità a schede e pulsanti

Basta un'ombra lieve perché risulti assai più chiaro che un elemento si può premere.

Sollevare finestre modali e menu a discesa

L'intensità dell'ombra esprime quanto il pannello galleggi sopra il contenuto retrostante.

Riprodurre l'ombra di un bozzetto

Traducendo in CSS le impostazioni d'ombra di uno strumento di progetto, può allineare i valori confrontandoli.

Creare un aspetto incassato

Con inset può provare trattamenti che facciano sembrare un campo di immissione sprofondato nella pagina.

I termini di box-shadow spiegati

Scostamento: Di quanto l'ombra è spostata. Il primo valore è orizzontale, il secondo verticale; i positivi la muovono a destra e in basso.
Raggio di sfocatura: Di quanto il bordo dell'ombra viene ammorbidito. A zero si ottiene un'ombra dal contorno netto.
Raggio di espansione: Di quanto l'ombra viene ingrandita. Un valore negativo la restringe.
inset: La parola chiave che proietta l'ombra dentro l'elemento, producendo un aspetto rientrante.
Opacità: La densità dell'ombra, data come valore alfa di rgba(). Un'ombra troppo densa appare pesante.
Ombre multiple: Si possono sovrapporre più ombre separate da virgole. Un'ombra scura e stretta sopra una ampia e tenue risulta convincente.

Domande frequenti

Il blur (raggio di sfocatura) stabilisce quanto sfumare il contorno dell'ombra: più il valore è alto, più il bordo si allarga dolcemente. Lo spread (raggio di diffusione) ingrandisce o riduce invece l'ombra stessa: con valori positivi si estende oltre l'elemento, con valori negativi si contrae. Combinandoli si regola con precisione la resa dell'ombra.

inset è l'opzione che disegna l'ombra all'interno dell'elemento anziché all'esterno. Mentre un box-shadow normale fa sembrare l'elemento sollevato, inset dà l'impressione che sia incavato o che l'ombra cada dentro la cornice. Si usa spesso per rifinire i bordi dei campi di un modulo.

La proprietà box-shadow accetta più ombre separate da virgole e la loro sovrapposizione permette rese più tridimensionali. Per semplicità d'uso e di apprendimento, questo strumento genera una sola ombra: se ve ne servono di più, partite dal CSS prodotto e aggiungete a mano i valori separati da virgola.

box-shadow è una proprietà CSS standard supportata da tutti i principali browser moderni e anche da Internet Explorer 9 in poi. C'è stata un'epoca in cui servivano i prefissi (-webkit-, -moz-), ma oggi si usa senza alcun accorgimento.

Un'ombra in nero pieno (#000000 con opacità al 100%) su certi sfondi appare staccata o innaturalmente marcata. Usando un nero o un grigio semitrasparente si ottiene un'ombra morbida che si integra bene con qualunque colore di sfondo.

A proposito — come box-shadow ha cambiato il design web

Prima che box-shadow venisse standardizzato nei CSS3, per rappresentare un'ombra sul web bisognava applicare come sfondo un PNG con l'ombra già disegnata, oppure sovrapporre più elementi div con sfondi sfumati per simularla: metodi laboriosi. Bastava modificare di poco la forma o la sfocatura per dover rifare l'immagine, e sperimentare costava moltissimo.

Dal 2009 circa, con l'arrivo di box-shadow nei browser come parte dei CSS3, generare un'ombra è diventato affare di una sola riga di CSS. Non dovendo più preparare immagini, le pagine si sono alleggerite ed è nato il vantaggio di un'ombra che non si deforma al variare della dimensione dello schermo nei layout responsivi.

Nel Material Design presentato da Google nel 2014 è stato introdotto il concetto di «elevation», costruito proprio sul box-shadow: assegnando a ogni elemento un'altezza diversa lungo l'asse Z e rendendo l'ombra più ampia e intensa per gli elementi più alti, si ottiene una gerarchia in profondità dentro uno schermo piatto. È un'idea che influenza ancora oggi molti sistemi di progettazione.

Vedi tutte le curiosità