Go Back
Shadows
Adds depth and emphasis through simulated cast shadows, enhancing the visual appeal of elements.
Element Shadow
Box Shadow
shadow-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/[0.05]
shadow-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
ironside-gray-950/[0.05]
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
ironside-gray-950/[0.03]
shadow-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
ironside-gray-950/[0.05]
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
ironside-gray-950/[0.05]
shadow-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
ironside-gray-950/[0.05]
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
ironside-gray-950/[0.05]
shadow-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
ironside-gray-950/[0.05]
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
ironside-gray-950/[0.05]
shadow-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
ironside-gray-950/[0.10]
Box Shadow Color / Brand
shadow-brand-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
crusta-600/[0.30]
shadow-brand-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
crusta-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
crusta-600/[0.20]
shadow-brand-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
crusta-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
crusta-600/[0.20]
shadow-brand-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
crusta-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
crusta-600/[0.20]
shadow-brand-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
crusta-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
crusta-600/[0.20]
shadow-brand-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
crusta-600/[0.40]
Box Shadow Color / Accent
shadow-accent-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
keppel-600/[0.30]
shadow-accent-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
keppel-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
keppel-600/[0.20]
shadow-accent-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
keppel-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
keppel-600/[0.20]
shadow-accent-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
keppel-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
keppel-600/[0.20]
shadow-accent-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
keppel-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
keppel-600/[0.20]
shadow-accent-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
keppel-600/[0.40]
Box Shadow Color / Success
shadow-success-xs
Drop Shadow
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
emerald-600/[0.30]
shadow-success-sm
Drop Shadow (level 2)
X: 0px
Blur: 3px
Y: 1px
Spread: 0px
emerald-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 2px
Y: 1px
Spread: 0px
emerald-600/[0.20]
shadow-success-md
Drop Shadow (level 2)
X: 0px
Blur: 8px
Y: 4px
Spread: -2px
emerald-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 4px
Y: 2px
Spread: -2px
emerald-600/[0.20]
shadow-success-lg
Drop Shadow (level 2)
X: 0px
Blur: 18px
Y: 12px
Spread: -6px
emerald-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 8px
Y: 4px
Spread: -4px
emerald-600/[0.20]
shadow-success-xl
Drop Shadow (level 2)
X: 0px
Blur: 22px
Y: 18px
Spread: -4px
emerald-600/[0.30]
Drop Shadow (level 1)
X: 0px
Blur: 10px
Y: 8px
Spread: -6px
emerald-600/[0.20]
shadow-success-2xl
Drop Shadow
X: 0px
Blur: 46px
Y: 24px
Spread: -10px
emerald-600/[0.40]