sunweb

Shadows

foundations shadows

Definition


The shadows are used to highlight text and elements. It could be also used to increase readability.


shadow--discrete 1px 1px 10px #362f2f 0.1
Discrete

shadow--elevated 1px 1px 5px #362f2f 0.14
Elevated

shadow--glow 0px 0px 10px #362f2f 1
Glow

shadow--sunken inset 0px 0px 8px 0px #362f2f 0.14
Sunken

shadow--submersed inset 0px -10px 10px -9px #362f2f 0.1
Submersed

shadow--superimposed 0px -3px 4px #362f2f 0.2
Superimposed

shadow--border 0px 0px 1px #362f2f 1
Border

shadow--elegant 0px 8px 12px #362f2f 0.05
Elegant

shadow--text 1px 1px 5px #362f2f 0.85
Text

shadow--top 0px -2px 12px #362f2f 0.1
Top