Generatore di Ombre CSS

Riferimento

Cos'è CSS box-shadow?

La proprietà CSS box-shadow aggiunge uno o più effetti ombra attorno al riquadro di un elemento. È definita da offset relativi all'elemento, raggi di sfocatura e espansione, colore e una parola chiave inset opzionale. Più ombre sono separate da virgole e renderizzate dal fronte al retro.

Sintassi di box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Distanza orizzontale. Positivo = destra, negativo = sinistra.
offset-y: Distanza verticale. Positivo = basso, negativo = alto.
blur-radius (opzionale, default 0): Valori più alti producono un'ombra più morbida e diffusa.
spread-radius (opzionale, default 0): Valori positivi espandono l'ombra, negativi la riducono.
inset (opzionale): Sposta l'ombra all'interno dell'elemento.

Uso di più livelli di ombra

Combinare più ombre crea effetti di profondità realistici. Una tecnica comune è combinare un'ombra stretta e scura vicina all'elemento (per definizione) con un'ombra grande e tenue più lontana (per profondità). Material Design e i sistemi di design moderni usano ombre stratificate per comunicare l'elevazione.

Consigli di design per le ombre

Usa colori rgba() o hsla() — le ombre semi-trasparenti appaiono più naturali di quelle opache.
Mantieni la fonte di luce coerente — usa la stessa direzione di offset in tutta la tua interfaccia.
Evita il nero puro — usa un tono scuro del tuo colore di marca per ombre più morbide.
Prestazioni — box-shadow attiva operazioni di ridisegno. Per elementi animati, preferisci filter: drop-shadow().

Privacy

Tutta la generazione di ombre viene eseguita al 100% nel tuo browser. Nessun dato viene inviato a nessun server.