Shadows

Shadows are used to create depth and hierarchy in the design. They can be applied to various elements to give them a sense of elevation and separation from the background.

primary

0px 1px 4px 0px rgba(0, 0, 0, 0.15)

offsetX:
 0px

offsetY:
 1px

blurRadius:
 4px

spreadRadius: 
0px

color: 
rgba(0, 0, 0, 0.15)

clickable

0px 1px 4px 0px rgba(0, 0, 0, 0.16)

offsetX:
 0px

offsetY:
 1px

blurRadius:
 4px

spreadRadius: 
0px

color: 
rgba(0, 0, 0, 0.16)

hover

0px 1px 8px 0px rgba(0, 0, 0, 0.32)

offsetX:
 0px

offsetY:
 1px

blurRadius:
 8px

spreadRadius: 
0px

color: 
rgba(0, 0, 0, 0.32)

pressed

0px 1px 1px 0px rgba(0, 0, 0, 0.1)

offsetX:
 0px

offsetY:
 1px

blurRadius:
 1px

spreadRadius: 
0px

color: 
rgba(0, 0, 0, 0.1)