Box Shadow Generator

Informazioni su questo strumento

Orizzontale — valori positivi spostano l'ombra a destra, negativi a sinistra. Verticale — positivi verso il basso, negativi verso l'alto. Sfocatura — valori maggiori creano ombre più morbide e diffuse. Espansione — positivi espandono l'ombra, negativi la riducono.

Abilita interno per creare ombre interne. Aggiungi più ombre con "+ Aggiungi ombra" — sono separate da virgole nell'output CSS, sovrapposte dall'avanti all'indietro.

Come usare

1. Regola i cursori Orizzontale e Verticale per impostare l'offset dell'ombra.
2. Aumenta la Sfocatura per un'ombra morbida, o impostala a 0 per un'ombra netta.
3. Usa l'Espansione per allargare o ridurre l'ombra oltre l'elemento.
4. Clicca su "+ Aggiungi ombra" per sovrapporre più ombre e ottenere effetti più ricchi.

Casi d'uso

I designer usano box-shadow per profondità ed elevazione nei componenti card. Le ombre interne creano effetti di pulsante premuto. Più ombre sovrapposte producono illuminazione realistica con luce ambientale e luce principale.

Domande frequenti

• Cos'è l'opzione inset? — Le ombre inset appaiono all'interno del bordo dell'elemento invece che all'esterno. Sono utili per creare effetti premuto su input e pulsanti.
• Posso aggiungere più ombre? — Sì. Clicca su "+ Aggiungi ombra" per aggiungere un'altra ombra. Tutte vengono combinate in una dichiarazione box-shadow separata da virgole.
• Cosa fa un valore di espansione negativo? — Un'espansione negativa rimpicciolisce l'ombra rispetto all'elemento. Combinata con offset e sfocatura, crea un'ombra sottile che spunta solo da un lato.