Box Shadow

Use box-shadow utilities to apply outer shadow effects to elements. Shadows add depth and visual hierarchy to your interface.

Basic example

Use utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element:

Style('shadow-md ...')
Style('shadow-lg ...')
Style('shadow-xl ...')

Changing the opacity

Use the opacity modifier to adjust the opacity of the box shadow:

Style('shadow-xl ...')
Style('shadow-xl/20 ...')
Style('shadow-xl/30 ...')

The default box shadow opacities are quite low (25% or less), so increasing the opacity (to like 50%) will make the box shadows more pronounced.

Setting the shadow color

Use utilities like shadow-indigo-500 and shadow-cyan-500/50 to change the color of a box shadow:

Style('bg-cyan-500 shadow-lg shadow-cyan-500/50 ...', child: Text('Subscribe'))
Style('bg-blue-500 shadow-lg shadow-blue-500/50 ...', child: Text('Subscribe'))
Style('bg-indigo-500 shadow-lg shadow-indigo-500/50 ...', child: Text('Subscribe'))

By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

Adding an inset shadow

Use utilities like inset-shadow-xs and inset-shadow-sm to apply an inset box shadow to an element:

Style('inset-shadow-2xs ...')
Style('inset-shadow-xs ...')
Style('inset-shadow-sm ...')

You can adjust the opacity of an inset shadow using the opacity modifier, like inset-shadow-sm/50. The default inset shadow opacities are quite low (5%), so increasing the opacity (to like 50%) will make the inset shadows more pronounced.

Setting the inset shadow color

Use utilities like inset-shadow-indigo-500 and inset-shadow-cyan-500/50 to change the color of an inset box shadow:

Style('inset-shadow-sm inset-shadow-indigo-500 ...')
Style('inset-shadow-sm inset-shadow-indigo-500/50 ...')

By default colored inset shadows have an opacity of 100% but you can adjust this using the opacity modifier.

Adding a ring

Use ring or ring-<number> utilities like ring-2 and ring-4 to apply a solid box-shadow to an element:

Style('ring ...', child: Text('Subscribe'))
Style('ring-2 ...', child: Text('Subscribe'))
Style('ring-4 ...', child: Text('Subscribe'))

By default rings match the currentColor of the element they are applied to.

Setting the ring color

Use utilities like ring-indigo-500 and ring-cyan-500/50 to change the color of a ring:

Style('ring-2 ring-blue-500 ...', child: Text('Subscribe'))
Style('ring-2 ring-blue-500/50 ...', child: Text('Subscribe'))

Adding an inset ring

Use inset-ring or inset-ring-<number> utilities like inset-ring-2 and inset-ring-4 to apply a solid inset box-shadow to an element:

Style('inset-ring ...', child: Text('Subscribe'))
Style('inset-ring-2 ...', child: Text('Subscribe'))
Style('inset-ring-4 ...', child: Text('Subscribe'))

Setting the inset ring color

Use utilities like inset-ring-indigo-500 and inset-ring-cyan-500/50 to change the color of an inset ring:

Style('inset-ring-2 inset-ring-blue-500 ...', child: Text('Subscribe'))
Style('inset-ring-2 inset-ring-blue-500/50 ...', child: Text('Subscribe'))

Removing a box shadow

Use the shadow-none, inset-shadow-none, ring-0, and inset-ring-0 utilities to remove an existing box shadow from an element:

Style('shadow-none ...')

Class reference

Class	Description
shadow-2xs	Apply a 2x extra small box shadow
shadow-xs	Apply an extra small box shadow
shadow-sm	Apply a small box shadow
shadow	Apply a normal box shadow
shadow-md	Apply a medium box shadow
shadow-lg	Apply a large box shadow
shadow-xl	Apply an extra large box shadow
shadow-2xl	Apply a 2x extra large box shadow
shadow-none	Remove any box shadow
shadow-{color}	Override the box-shadow color (e.g. shadow-cyan-500)
shadow-{color}/{opacity}	Color override with explicit alpha (e.g. shadow-cyan-500/50)
shadow-{size}/{opacity}	Size with alpha override (e.g. shadow-xl/20)
inset-shadow-2xs	Apply a 2x extra small inset box shadow
inset-shadow-xs	Apply an extra small inset box shadow
inset-shadow-sm	Apply a small inset box shadow
inset-shadow-none	Remove any inset box shadow
inset-shadow-{color}	Override the inset shadow color
inset-shadow-{color}/{opacity}	Inset color override with alpha
inset-shadow-{size}/{opacity}	Inset size with alpha override