CSS Box-Shadow Generator

Crea ombre CSS singole e multiple visivamente con anteprima dal vivo.



px
px
px

{{ cssOutput }}

Cos’è CSS box-shadow?

La proprietà CSS box-shadow aggiunge una o più ombre a un elemento. Le ombre creano profondità e fanno risaltare elementi come card, pulsanti e finestre di dialogo dallo sfondo.

La sintassi di box-shadow

La sintassi è: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X e Offset-Y determinano la posizione dell’ombra. Il raggio di sfocatura controlla la morbidezza, il raggio di espansione ingrandisce o riduce l’ombra.

Consigli per ombre perfette

  • Usa più ombre con diversi valori di sfocatura per risultati più realistici.
  • Mantieni i colori delle ombre sottili — usa toni neri trasparenti invece di colori forti.
  • Le ombre inset funzionano benissimo per pulsanti premuti e campi di input.
  • Testa le ombre sia in modalità chiara che scura, poiché possono apparire diverse.