Generatore di Box Shadow — Strumento Visuale CSS box-shadow

Generatore di Box Shadow — Progetta Ombre CSS Visivamente

Crea effetti CSS box-shadow perfetti con un editor visivo dal vivo. Trascina i cursori per controllare offset, sfocatura, espansione e colore, impila più livelli di ombra per la profondità, attiva ombre interne e copia il CSS pronto all’uso. Niente più tentativi con i valori in pixel.

I quattro valori di box-shadow

• Offset X: distanza orizzontale — positivo sposta l’ombra a destra, negativo a sinistra
• Offset Y: distanza verticale — positivo verso il basso, negativo verso l’alto
• Sfocatura: quanto è morbido il bordo dell’ombra (0 = netto, alto = molto morbido)
• Espansione: ingrandisce (positivo) o riduce (negativo) la dimensione dell’ombra

Funzionalità

• Anteprima dal vivo: vedi l’ombra su un elemento di esempio istantaneamente
• Colore + opacità: scegli qualsiasi colore e regola la trasparenza
• Ombre interne: crea ombre interne per effetti incassati
• Livelli multipli: impila più ombre per una profondità realistica
• Output CSS pulito: copia una singola proprietà pronta da incollare

Consigli per ombre realistiche

• Le ombre reali sono di solito morbide — usa una sfocatura generosa e bassa opacità (10–25%)
• Sovrapponi due o tre ombre (una stretta scura + una ampia morbida) per profondità naturale
• Mantieni una direzione della luce coerente in tutta la tua interfaccia
• Il sottile è meglio — le ombre pesanti sembrano datate

Privacy

Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.