Generatore di Ombre CSS

Crea valori CSS box-shadow multilivello con anteprima live, opzione inset e controlli precisi.

Livelli1
Crea valori CSS box-shadow multilivello con anteprima live, opzione inset e controlli precisi.
Impostazioni livello
Livello 1
px
px
px
px
Anteprima
Copia il valore box-shadow nel tuo CSS.
box-shadow
Output CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

Che cos’è box-shadow?

Crea valori CSS box-shadow multilivello con anteprima live, opzione inset e controlli precisi.

box-shadow è una proprietà CSS che disegna una o più ombre dietro (o all’interno) di un elemento.

Ogni ombra usa offset orizzontale e verticale, raggio di sfocatura, espansione opzionale e un colore con alfa; aggiungi inset per renderla un’ombra interna.

Le modalità a più livelli sono separate da virgole e permettono di sovrapporre ombre leggere per creare profondità, bagliore o bordi netti.

  • Usa piccoli offset con più sfocatura per una morbida elevazione.
  • Usa maggiore opacità con poca sfocatura per bordi più definiti.
  • Combina un’ombra esterna con una interna per aggiungere profondità.
  • Limita il numero di livelli per prestazioni migliori.