DevToolPal
IT

Generatore di ombre CSS (box-shadow)

Crea ombre CSS in modo visuale: sovrapponi più livelli, regola spostamento, sfocatura, espansione, colore e inset, con anteprima dal vivo, preimpostazioni e CSS pronto da copiare.

Eseguito in locale, mai caricato

Livelli d'ombra

Nessuna ombra. Aggiungi un livello o scegli una preimpostazione.

Anteprima

Colore del riquadro
Sfondo

CSS

Preimpostazioni
CSS di box-shadow
 
 
 
 
 
Cosa fa


Il generatore di ombre ti permette di progettare ombre CSS a occhio e copiare la dichiarazione box-shadow finita. Sovrapponi tutti i livelli che servono, imposta per ciascuno spostamento, sfocatura, espansione, colore e opacità, trasformalo in ombra interna e l’anteprima si aggiorna all’istante. Puoi anche incollare un valore box-shadow esistente per modificarlo visivamente. Tutto avviene nel tuo browser.


Come si usa


    

  1. Parti da una preimpostazione o tieni l’ombra di esempio.
    2. 

  2. Scegli un livello con i pulsanti Livello oppure usa + Aggiungi livello per sovrapporne un altro.
    3. 

  3. Trascina Spostamento orizzontale, Spostamento verticale, Sfocatura ed Espansione, scegli un Colore e abbassa l’Opacità per un effetto più morbido. Attiva Interna per un’ombra verso l’interno.
    4. 

  4. Regola Colore del riquadro, Sfondo e Raggio degli angoli dell’anteprima per adattarli alla tua pagina. Influiscono solo sull’anteprima.
    5. 

  5. Copia il codice dalla scheda CSS.
    6. 



Il riquadro CSS di box-shadow in basso è modificabile: incolla un’ombra dal tuo foglio di stile o strumento di design e i controlli la leggono. Le lunghezze in rem o em vengono convertite in px su base 16px.


Esempio


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Consigli per ombre naturali


    

  • Opacità bassa. Un nero al 5–25% appare realistico; ombre scure e piene risultano pesanti.
    • 

  • Espansione negativa evita che una grande sfocatura fuoriesca ai lati: è il trucco della maggior parte delle ombre “card”.
    • 

  • Colora l’ombra. Un’ombra con un po’ della tinta dello sfondo o del brand è più ricca del grigio puro.
    • 

  • Luce da un solo lato. Mantieni positivo lo spostamento verticale in tutti i livelli, così tutte le ombre concordano sulla direzione della luce.
    • 

  • Prestazioni. Grandi sfocature su molti elementi possono rallentare lo scorrimento sui telefoni economici; anima opacity o transform invece dell’ombra stessa.
    • 

 
  
 
Domande frequenti
 
 
  › Cosa indicano i quattro numeri di box-shadow?  
In ordine: spostamento orizzontale, spostamento verticale, raggio di sfocatura e raggio di espansione. Spostamenti positivi muovono l'ombra a destra e in basso. La sfocatura ammorbidisce il bordo e non può essere negativa. L'espansione ingrandisce (positiva) o riduce (negativa) l'ombra prima della sfocatura.
 
  › Perché usare più livelli d'ombra?  
Le ombre reali sono nitide vicino all'oggetto e svaniscono lontano. Sovrapporre due o più livelli, per esempio uno piccolo e netto e uno grande e morbido, appare molto più naturale di un'unica sfocatura scura. È così che la maggior parte dei design system costruisce i livelli di elevazione.
 
  › Cosa fa inset?  
inset disegna l'ombra dentro il riquadro invece che fuori, come se l'elemento fosse premuto. Si usa per campi di input, pulsanti premuti e bagliori interni. Puoi mescolare livelli inset ed esterni nello stesso box-shadow.
 
  › box-shadow segue il border-radius?  
Sì. L'ombra prende la forma dell'elemento, angoli arrotondati compresi, per questo l'anteprima usa il raggio impostato. Non segue le parti trasparenti di un'immagine; per quello usa il filtro CSS drop-shadow().