WELCOME
Telescope Design System > Foundations > Shadows
Shadows
Shadows allows to add depth and realism to designs by positioning elements on a z-axis.
Card Shadows
Shadow/Card/Spread
X: 0 Y: 0 Blur: 0 Spread: 1
#171B38
5%
#555555
15%
Shadow/Card/Soft
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
#171B38
5%
#555555
15%
X: 0 Y: 3 Blur: 3 Spread: -1.5
#2A2A45
5%
#999999
10%
Shadow/Card/Medium
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
#171B38
5%
#555555
15%
X: 0 Y: 3 Blur: 3 Spread: -1.5
X: 0 Y: 6 Blur: 6 Spread: -3
#2A2A45
5%
#999999
10%
Shadow/Card/Hard
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
X: 0 Y: 24 Blur: 24 Spread: -12
#171B38
5%
#555555
15%
X: 0 Y: 3 Blur: 3 Spread: -1.5
X: 0 Y: 6 Blur: 6 Spread: -3
X: 0 Y: 12 Blur: 12Spread: -6
#2A2A45
5%
#999999
10%
Button Shadows
Shadow/Button/Spread
Button
Drop Shadow
X: 0 Y: 0 Blur: 0 Spread: 1
#171B38
5%
#555555
15%
Shadow/Button/Soft
Button
Drop Shadow
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
#171B38
5%
#555555
15%
Drop Shadow
X: 0 Y: 3 Blur: 3 Spread: -1.5
#2A2A45
5%
#999999
10%
Shadow/Button/Medium
Button
Drop Shadow
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
#171B38
5%
#555555
15%
Drop Shadow
X: 0 Y: 3 Blur: 3 Spread: -1.5
X: 0 Y: 6 Blur: 6 Spread: -3
#2A2A45
5%
#999999
10%
Shadow/Button/Hard
Button
Inner Shadow
X: 0 Y: 1 Blur: 1 Spread: 1
#FAFAFA
20%
#FAFAFA
10%
Inner Shadow
X: 0 Y: -1 Blur: 1 Spread: 1
#0A0A0A
10%
#0A0A0A
25%
Drop Shadow
X: 0 Y: 0 Blur: 0 Spread: 1
X: 0 Y: 1 Blur: 1 Spread: -0.5
#171B38
5%
#555555
15%
Drop Shadow
X: 0 Y: 3 Blur: 3 Spread: -1.5
X: 0 Y: 6 Blur: 6 Spread: -3
#2A2A45
5%
#999999
10%