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 #000000 0.1
Discrete

shadow--elevated 1px 1px 5px #000000 0.14
Elevated

shadow--sunken inset 0px 0px 8px 0px #000000 0.14
Sunken

shadow--glow 0px 0px 10px #000000 1
Glow

shadow--submersed inset 0px -10px 10px -9px #000000 0.1
Submersed

shadow--superimposed 0px -3px 4px #000000 0.1
Superimposed

shadow--border 0px 0px 1px #000000 1
Border

shadow--elegant 0px 8px 12px #000000 0.05
Elegant

shadow--text 1px 1px 5px #000000 0.85
Text