Generatore di ombreggiatura dei riquadri

Regola i cursori per creare un'ombra proiettata o un'ombra interna nell'area di anteprima, quindi copia il codice CSS generato per l'ombra del riquadro. Controlla l'offset orizzontale e verticale, il raggio di sfocatura, il raggio di diffusione, il colore e l'opacità: non è necessario ricordare l'ordine degli argomenti né convertire manualmente i colori in rgba().

Che cos'è questo strumento?

box-shadow è la proprietà CSS che disegna un'ombra dietro (o all'interno) di un elemento. Se scritta manualmente, accetta fino a cinque valori in ordine: offset orizzontale, offset verticale, raggio di sfocatura, raggio di diffusione e un colore, oltre alla parola chiave opzionale «inset»; è facile confondere questi valori o ottenere un effetto troppo sottile o troppo marcato al primo tentativo.

Questo strumento trasforma il tutto in una manipolazione diretta: trascina il cursore, osserva come cambia l'ombra nell'anteprima in tempo reale e copia il codice CSS esatto quando ti sembra corretto. Il selettore di colore, insieme al cursore di opacità, genera automaticamente un valore rgba() corretto, poiché le ombre trasparenti in genere risultano più gradevoli di quelle completamente opache.

Perché usarlo?

L'anteprima in tempo reale si aggiorna istantaneamente man mano che modifichi qualsiasi controllo: puoi vedere l'ombra esatta prima di confermare il codice.
Controllo completo su offset-x, offset-y, sfocatura, diffusione, colore e opacità in un unico posto.
Con un solo clic si aggiunge un riquadro che crea un effetto incassato o rientrante, anziché un'ombra proiettata sospesa.
Genera codice CSS pronto per essere incollato, con il colore già convertito in rgba() all'opacità scelta.
Funziona interamente nel browser: nessuna delle impostazioni configurate viene caricata da nessuna parte.
Gratuito, senza registrazione, funziona su dispositivi mobili.

Come si usa

Imposta i valori di offset-x e offset-y per posizionare l'ombra: i valori positivi la spostano verso destra/in basso, mentre quelli negativi la spostano verso sinistra/in alto.
Aumenta il raggio di sfocatura per ammorbidire i bordi dell'ombra; aumenta la diffusione per rendere l'ombra più grande dell'elemento stesso.
Scegli un colore e regola l'opacità: le ombre più realistiche utilizzano un'opacità compresa tra il 15% e il 40%, anziché il nero pieno.
Seleziona "inset" se desideri che l'ombra appaia all'interno del bordo dell'elemento anziché dietro di esso.
Copia il codice CSS generato e incollalo nel tuo foglio di stile.

Esempio

Input

Offset: 0px, 10px · Blur: 20px · Spread: 0px · Color: black at 35% opacity

Risultato

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Un'ombra morbida posizionata direttamente sotto l'elemento, senza alcun spostamento orizzontale: uno degli stili di ombra più comuni per schede e pulsanti.

Ombra singola vs. ombre sovrapposte

Questo strumento crea un unico livello di ombra, che copre la stragrande maggioranza dei casi d'uso reali: pulsanti, schede, finestre modali e menu a tendina utilizzano quasi sempre una sola ombra. Il CSS supporta l'uso di più ombre separate da virgole sullo stesso elemento per ottenere effetti di profondità più elaborati (ad esempio, un'ombra scura e stretta sovrapposta a una morbida e ampia), ma si tratta di una raffinatezza che è possibile aggiungere manualmente: genera un'ombra qui, poi duplica la riga, modifica la seconda serie di valori e uniscile con una virgola.

Modelli comuni di ombreggiatura (box-shadow)

Effetto di sollevamento leggero della carta: leggero spostamento (0–4px), sfocatura moderata (8–16px), nero con opacità del 10–20%.
Finestra modale/menu a tendina: offset maggiore (4–10 px) e sfocatura (20–30 px), opacità del 20–35% per dare una sensazione più marcata di galleggiamento.
Pulsante incassato/in rilievo: verificare l'incasso, utilizzare un leggero offset con effetto negativo e una sfocatura moderata, in modo che l'ombra appaia come un incavo anziché come un rilievo.
Bagliore colorato: scegli un colore del marchio invece del nero, aumenta l'opacità al 40–60% e aumenta leggermente la diffusione per ottenere un effetto di bagliore morbido attorno ai pulsanti.
Ombra netta/definita: imposta la sfocatura su 0 e la diffusione su 0 per ottenere una sagoma ben definita e sfalsata, anziché un'ombra morbida.

Abbinamento con angoli arrotondati

Le ombre e gli angoli arrotondati vengono utilizzati insieme costantemente: schede, pulsanti e finestre modali combinano quasi sempre entrambi. Usa il Border Radius Generator per arrotondare gli angoli dello stesso elemento, quindi applica entrambe le dichiarazioni CSS generate contemporaneamente.

→ Generatore di raggio di bordo · Convertitore di unità

Domande frequenti

Qual è la differenza tra "blur" e "spread"?

Il raggio di sfocatura attenua i bordi dell'ombra: valori più alti la fanno sfumare in modo più graduale. Il raggio di espansione modifica le dimensioni dell'ombra prima della sfocatura: un valore positivo la rende più grande dell'elemento su tutti i lati, mentre un valore negativo la riduce. Nella maggior parte delle ombre comuni si utilizza la sfocatura con l'espansione impostata a 0.

Perché usare rgba() invece di un semplice codice esadecimale per l'ombra?

Un'ombra completamente opaca risulta troppo netta e poco realistica: le ombre reali sono sempre leggermente trasparenti, lasciando intravedere ciò che si trova dietro di esse. La funzione rgba() consente di impostare direttamente tale trasparenza; ecco perché questo strumento restituisce sempre il colore con un valore alfa anziché un codice esadecimale pieno.

A cosa serve la parola chiave "inset"?

Senza l'opzione `inset`, l'ombra viene disegnata all'esterno del bordo dell'elemento, come se quest'ultimo fosse sospeso sopra la pagina. Con l'opzione `inset`, l'ombra viene invece disegnata all'interno del bordo, facendo apparire l'elemento incassato o rientrante — una tecnica comunemente utilizzata per gli stati dei pulsanti attivi o premuti o per i campi di immissione dati.

Posso sovrapporre più di un'ombra sullo stesso elemento?

Sì — La proprietà `box-shadow` dei CSS accetta un elenco separato da virgole, e i browser le visualizzano nell'ordine indicato (la prima ombra è quella più in primo piano). Una tecnica comune consiste nel sovrapporre un'ombra stretta e più scura a una più ampia e sfumata, per ottenere una profondità più realistica rispetto a quella che ciascuna delle due ombre fornirebbe da sola.

L'effetto "box-shadow" influisce sul layout o solo sull'aspetto?

Solo aspetto: l'ombra (box-shadow) non influisce mai sulle dimensioni dell'elemento né sulla posizione degli elementi circostanti, anche con valori elevati di sfocatura o espansione. Se l'ombra risulta visivamente troncata, verifica se l'elemento padre ha l'attributo `overflow: hidden`, piuttosto che controllare i valori dell'ombra stessa.