Generatore di Box Shadow

Progetta ombre con feedback in tempo reale

Un box-shadow ben calibrato può far sembrare un'interfaccia stratificata, cliccabile e curata. Un'ombra calibrata male può far apparire la stessa interfaccia sporca o incoerente. Questo generatore offre controlli diretti per i valori che contano: offset orizzontale, offset verticale, sfocatura, diffusione, colore, opacità e modalità inset. Mentre muovi ogni cursore, l'anteprima e il CSS si aggiornano subito, e trovare un risultato naturale diventa più facile che digitare i numeri a mano.

L'output è una dichiarazione CSS standard, quindi funziona per card, modali, pulsanti, menu a tendina, barre di navigazione e qualsiasi altro elemento che accetti box-shadow. Non vengono create immagini e nulla viene caricato. Il browser applica semplicemente l'ombra all'elemento di anteprima e copia il CSS finale quando sei pronto.

Capire offset, sfocatura e diffusione

Gli offset orizzontale e verticale spostano l'ombra lontano dall'elemento. Un offset verticale positivo suggerisce spesso che l'oggetto sia sollevato rispetto alla pagina, mentre un'ombra con poco offset può sembrare un alone luminoso. La sfocatura controlla la morbidezza: una sfocatura bassa crea un bordo netto e grafico, mentre una sfocatura più alta produce un'ombra diffusa più realistica. La diffusione cambia la dimensione dell'ombra prima che venga applicata la sfocatura. Una diffusione positiva rende l'ombra più ampia e pesante; una negativa la restringe, così la sfocatura appare più sottile.

Usare le ombre in un design system

Le ombre sono più efficaci quando sono coerenti. Invece di inventare una nuova ombra per ogni componente, crea una piccola scala di elevazione: un'ombra sottile per le card, una più marcata per i popover e una concentrata per le modali. Prova le ombre sia su superfici chiare sia su superfici scure, perché la stessa opacità può risultare troppo forte su uno sfondo pallido e troppo debole su uno scuro. Le ombre inset sono utili per stati premuti, campi incassati e pannelli incavati, ma vanno usate con moderazione affinché i controlli restino chiari e accessibili.