Design
Generatore ombra box CSS
Inserimento
Regola offset, sfocatura, espansione e colore per generare il CSS box-shadow.
Offset X10px
Offset Y10px
Blur20px
Spread0px
Usa valori negativi per spostare l’ombra verso sinistra o verso l’alto.
Risultato
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);Domande frequenti
Quali sono i parametri CSS box-shadow?
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. offset-x/y: posizione dell'ombra. blur-radius: morbidezza (0 = netta). spread-radius: espansione (+) o contrazione (−) dell'ombra. inset: l'ombra appare all'interno dell'elemento. Più ombre separate da virgola sono supportate.
Come creo un'ombra neumorphism (soft UI)?
Il neumorphism usa due ombre: una chiara (bianca o quasi bianca) e una scura (colore di sfondo leggermente scurito), sfasate in direzioni opposte. Esempio: box-shadow: 6px 6px 12px #b8b9be, −6px −6px 12px #ffffff; su sfondo #e0e5ec. L'elemento sembra protrudere dalla superficie.
Posso aggiungere più box shadow?
Sì. CSS supporta più ombre separate da virgola su un singolo elemento. Le ombre sono renderizzate dal fronte al retro (la prima elencata è in primo piano). Usa ombre multiple per effetti complessi: highlight superiore + ombra ambientale inferiore, o gradienti di colore simulati con layer di ombre.