Generatore di Ombre CSS

La sintassi box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: positivo = destra, negativo = sinistra.
• y-offset: positivo = giù, negativo = su.
• blur: 0 = bordo netto, più alto = più morbido. La dimensione visibile è circa 1.5x la sfocatura oltre l’elemento.
• spread: dimensione extra oltre l’elemento. Positivo aumenta l’ombra; negativo la riduce (utile per aloni sottili).
• colour: supporta qualsiasi colore CSS. rgba(0, 0, 0, 0.15) è il pane quotidiano.
• inset: parola chiave che capovolge l’ombra all’interno dell’elemento.

Ombre stratificate sembrano reali

Questo generatore produce una regola d’ombra alla volta; per costruire un’ombra a più livelli, genera ogni livello separatamente e combina le regole con una virgola.

Un’ombra con 0 0 40px appare sfocata. Due ombre, una piccola e nitida vicino all’elemento e una più grande e morbida più lontano, imitano come la luce reale si disperde.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

La prima riga fornisce l’ombra di contatto stretta; la seconda l’ombra ambientale più morbida. Questo singolo schema copre l’80% delle interfacce utente in stile scheda.

Sistemi di elevazione

Il Material Design utilizza 6 livelli di elevazione, ciascuno con un diverso stack di ombre. Semplificato:

Scegli uno per ruolo di elevazione e usalo in modo coerente.

Ombre colorate appaiono più naturali

Ombre nere pure sembrano artificiali perché le ombre reali sono tinte dalla superficie sottostante. Prova:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

• un blu-grigio fresco invece di nero puro. Su sfondi caldi, usa una tinta più calda.

Prestazioni

Le ombre box-shadow vengono dipinte ad ogni ripristino. Ombre grandi e pesanti su molti elementi possono rallentare lo scorrimento. Mitigazioni:

• Usa transform: translateZ(0) sull’elemento per forzare uno strato composito.
• Sostituisci ombre complesse con filter: drop-shadow() solo se hai bisogno che l’ombra segua un clip-path (è più lenta in generale).
• Limita le ombre sugli elementi che si ridisegnano frequentemente.

Inset per stati premuti

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Le ombre inset simulano un aspetto incassato, il pulsante appare premuto nella superficie. Combina con un piccolo transform: translateY(1px) verso il basso per un clic tattile.