SuperDevTools
IT

Generatore box shadow: ombra CSS online

box-shadow ombreggia il riquadro dell'elemento: card, pulsante, blocco, campo di un modulo.

Preimpostazioni:

Ombre

La prima ombra dell'elenco è disegnata sopra le altre. Le frecce cambiano l'ordine; togli la spunta ad «Attiva» per escludere un'ombra dal codice senza eliminarla.

    Forma e sfondo

    Codice CSS

    Tutto viene calcolato nel browser: non viene inviato nulla. Le ultime impostazioni restano su questo dispositivo.

    Un'ombra regolata a occhio e il codice CSS pronto da incollare

    Questo generatore box shadow disegna l'ombra su una forma di prova e scrive il codice nello stesso momento. Puoi sovrapporre fino a 8 ombre, regolarle con i cursori e copiare una dichiarazione box-shadow pulita. Altre due schede fanno lo stesso per text-shadow e per filter: drop-shadow(). Tutto viene calcolato nel browser e non viene inviato nulla.

    Come creare un'ombra CSS

    1. Scegli la scheda: «box-shadow» per card e pulsanti, «text-shadow» per i titoli, «filter: drop-shadow()» per loghi e immagini trasparenti.
    2. Regola ogni ombra: «Spostamento X (px)», «Spostamento Y (px)», «Sfocatura (px)», «Espansione (px)», «Colore» e «Opacità (%)». Spunta «Interna (inset)» per un effetto incavato.
    3. «Aggiungi un'ombra» crea un altro livello. Le frecce ↑ e ↓ cambiano l'ordine, × elimina e, togliendo la spunta ad «Attiva», l'ombra esce dal codice ma conserva i suoi valori.
    4. In «Forma e sfondo» cambia larghezza, altezza, «Raggio degli angoli (px)» e colori, oppure passa a «Sfondo scuro».
    5. Scegli il formato dei colori (rgba() o «HEX a 8 cifre»), spunta «Variabili CSS» se ti servono e premi «Copia il codice». «Copia il link» salva tutte le impostazioni nell'indirizzo.

    Otto preimpostazioni, da «Morbida» a «Bagliore», fanno da punto di partenza.

    La proprietà box-shadow e la sua sintassi

    Alla prima apertura lo strumento scrive:

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    • Spostamento X: positivo verso destra, negativo verso sinistra. Qui 0.
    • Spostamento Y: positivo verso il basso. Qui 4px, come se la luce arrivasse dall'alto.
    • Sfocatura: l'ampiezza della sfumatura. Con 0 il bordo è netto; non accetta valori negativi.
    • Espansione: ingrandisce l'ombra (positiva) o la riduce (negativa) prima della sfocatura. Se manca, vale 0.
    • Colore: qui nero al 15% di opacità. In HEX a 8 cifre lo stesso colore è #00000026: le ultime due cifre indicano l'opacità, 38 su 255.

    Lo strumento omette un'espansione nulla, e una sfocatura nulla se non è seguita da un'espansione: 0 0 0 2px #1f5fe0 mantiene la sfocatura a 0, altrimenti i 2px verrebbero letti come sfocatura.

    Più ombre e inset

    Le ombre si separano con una virgola e la prima viene disegnata sopra le altre. La preimpostazione «A strati» sovrappone cinque ombre da 1, 2, 4, 8 e 16 px al 7% ciascuna: il risultato è più naturale di un'unica ombra grande. La parola inset porta l'ombra dentro il riquadro, come in un campo di un modulo incassato.

    text-shadow e drop-shadow

    text-shadow segue la forma delle lettere e non ha espansione né inset. filter: drop-shadow() ombreggia i pixel visibili: su un <img> con un PNG trasparente o su un'icona SVG l'ombra segue il disegno, mentre box-shadow ombreggia tutto il rettangolo. L'anteprima mostra le due stelle una accanto all'altra.

    Buone pratiche

    • Una sola fonte di luce. Mantieni la stessa direzione di spostamento in tutto il sito, di solito verso il basso.
    • Ombre morbide e coerenti. Un'opacità dal 10 al 25% spesso basta. Definisci due o tre livelli e riusali: l'opzione «Variabili CSS» scrive --shadow-1, --shadow-2 e così via.
    • Prestazioni. Animare ombre molto grandi e sfocate può rallentare uno smartphone economico; di solito conviene animare l'opacità di un'ombra fissa.
    • Accessibilità. Un'ombra non sostituisce il contrasto: pulsanti e campi devono restare visibili anche senza, grazie a un bordo o a un colore di fondo sufficiente.

    Domande frequenti

    Perché non vedo la mia ombra?

    Controlla l'opacità, la casella «Attiva» e il colore della pagina: un nero al 10% quasi scompare su uno sfondo scuro. Un contenitore con overflow: hidden taglia anche l'ombra che sporge.

    Meglio rgba o HEX a 8 cifre?

    Per il browser è lo stesso: rgba(0, 0, 0, 0.25) e #00000040 sono lo stesso nero al 25%. Segui il tuo foglio di stile.

    Come si ottiene l'effetto neumorfismo?

    Servono due ombre opposte su una forma dello stesso colore della pagina. La preimpostazione imposta entrambe su #e4e9f0, con un'ombra scura in basso a destra (8px 8px) e una bianca in alto a sinistra (-8px -8px). Il contrasto resta basso: usalo solo come decorazione.

    Le mie impostazioni vengono salvate?

    Le ultime impostazioni restano nel browser. Per ritrovarle su un altro dispositivo, usa «Copia il link».