In Development
Shadow
Shadow tokens help to create depth and visual hierarchy across the system. They are made up of a number of raw values, including colour, blur, transparency, spread and offset.
shadow/100
Offset X:
0px
Offset Y:
1px
Blur:
2px
Spread:
0px
Color:
#0000000d
Sample
shadow/200
Offset X:
0px
Offset Y:
1px
Blur:
3px
Spread:
0px
Color:
#0000001a
Sample
shadow/300
Offset X:
0px
Offset Y:
4px
Blur:
6px
Spread:
-1px
Color:
#0000001a
Sample
shadow/400
Offset X:
0px
Offset Y:
10px
Blur:
15px
Spread:
-3px
Color:
#0000001a
Sample
shadow/500
Offset X:
0px
Offset Y:
20px
Blur:
25px
Spread:
-5px
Color:
#0000001a
Sample
shadow/600
Offset X:
0px
Offset Y:
25px
Blur:
50px
Spread:
-12px
Color:
#00000040
Sample