Foundations
Inner Shadow & Focus Ring
Adds subtle depth inside elements for a nuanced visual effect.
Inner Shadow
shadow-inset-inverse-top
Inner Shadow
X: 0px
Blur: 0px
Y: 1px
Spread: -1px
white/20
shadow-inset-inverse-bottom
Inner Shadow
X: 0px
Blur: 1px
Y: -1px
Spread: 0px
white/10
shadow-inset-top
Inner Shadow
X: 0px
Blur: 0px
Y: 1px
Spread: 0px
ironside-gray-950/10
shadow-inset-bottom
Inner Shadow
X: 0px
Blur: 0px
Y: -1px
Spread: 0px
ironside-gray-950/10
Focus ring
ring-black
Drop Shadow (level 2)
X: 0px
Blur: 0px
Y: 0px
Spread: 2px
white
Drop Shadow (level 1)
X: 0px
Blur: 0px
Y: 0px
Spread: 4px
ironside-gray-950
ring-shadow-black
Inner Shadow
X: 0px
Blur: 4px
Y: -3px
Spread: -1px
ironside-gray-950/5
Drop Shadow (level 4)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
ironside-gray-950/5
Drop Shadow (level 3)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/5
Drop Shadow (level 2)
X: 0px
Blur: 0px
Y: 0px
Spread: 2px
white
Drop Shadow (level 1)
X: 0px
Blur: 0px
Y: 0px
Spread: 4px
ironside-gray-950
ring-inverse-element
Inner Shadow
X: 0px
Blur: 4px
Y: 3px
Spread: -1px
white/30
Drop Shadow (level 4)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
ironside-gray-950/5
Drop Shadow (level 3)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/3
Drop Shadow (level 2)
X: 0px
Blur: 0px
Y: 0px
Spread: 2px
white
Drop Shadow (level 1)
X: 0px
Blur: 0px
Y: 0px
Spread: 4px
ironside-gray-950
ring-element
Inner Shadow
X: 0px
Blur: 4px
Y: -3px
Spread: -1px
ironside-gray-950/5
Drop Shadow (level 4)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
ironside-gray-950/5
Drop Shadow (level 3)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/3
Drop Shadow (level 2)
X: 0px
Blur: 0px
Y: 0px
Spread: 2px
white
Drop Shadow (level 1)
X: 0px
Blur: 0px
Y: 0px
Spread: 4px
ironside-gray-950
Shadows
Blur