Generatore Ombra Box CSS — Costruttore Visuale di Ombre Gratis

Le ombre box sono uno dei dettagli che distinguono il design amatoriale da quello professionale. Un'ombra troppo dura sembra anni '90; nessuna ombra può far sembrare l'UI piatta e senza profondità. Il nostro generatore visuale rende facile trovare l'ombra perfetta per ogni elemento.

Parametri della Box Shadow

• offset-x / offset-y: Spostamento orizzontale e verticale dell'ombra. Valori positivi → destra/basso.
• blur-radius: Raggio di sfumatura. 0 = ombra netta; valori alti = ombra morbida e diffusa.
• spread-radius: Espande o restringe l'ombra rispetto all'elemento. Negativo per ombra "incassata".
• color: Usa rgba() per ombre semi-trasparenti — le ombre nere solide sembrano crude su sfondi colorati.
• inset: Crea un'ombra interna all'elemento invece che esterna.

Ombre Multiple

Puoi applicare più ombre a un elemento separandole con virgole: box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.08). La tecnica dell'ombra a strati (una piccola e scura + una grande e leggera) produce risultati molto più realistici di una singola ombra.