Examples

Basic example

Use utilities likeshadow-sm andshadow-lg to apply different sized outer box shadows to an element:

<div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

Changing the opacity

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

<div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

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 likeshadow-indigo-500 andshadow-cyan-500/50 to change the color of a box shadow:

<button class="bg-cyan-500 shadow-lgshadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lgshadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lgshadow-indigo-500/50 ...">Subscribe</button>

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

Adding an inset shadow

Use utilities likeinset-shadow-xs andinset-shadow-sm to apply an inset box shadow to an element:

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

You can adjust the opacity of an inset shadow using the opacity modifier, likeinset-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 likeinset-shadow-indigo-500 andinset-shadow-cyan-500/50 to change the color of an inset box shadow:

<div class="inset-shadow-sminset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

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

Adding a ring

Usering orring-<number> utilities likering-2 andring-4 to apply a solid box-shadow to an element:

<button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

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

Setting the ring color

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

<button class="ring-2ring-blue-500 ...">Subscribe</button><button class="ring-2ring-blue-500/50 ...">Subscribe</button>

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

Adding an inset ring

Useinset-ring orinset-ring-<number> utilities likeinset-ring-2 andinset-ring-4 to apply a solid inset box-shadow to an element:

<button class="inset-ring ...">Subscribe</button><button class="inset-ring-2 ...">Subscribe</button><button class="inset-ring-4 ...">Subscribe</button>

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

Setting the inset ring color

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

<button class="inset-ring-2inset-ring-blue-500 ...">Subscribe</button><button class="inset-ring-2inset-ring-blue-500/50 ...">Subscribe</button>

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

Removing a box shadow

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

<div class="shadow-none ..."></div>

Using a custom value

Use utilities likeshadow-[<value>],inset-shadow-[<value>],ring-[<value>], andinset-ring-[<value>] to set the box shadow based on a completely custom value:

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></div>

For CSS variables, you can also use theshadow-(<custom-property>) syntax:

<div class="shadow-(--my-shadow) ...">  <!-- ... --></div>

This is just a shorthand forshadow-[var(<custom-property>)] that adds thevar() function for you automatically.

Responsive design

Prefix abox-shadow utility with a breakpoint variant likemd: to only apply the utility at medium screen sizes and above:

<div class="shadow-nonemd:shadow-lg ...">  <!-- ... --></div>

Learn more about using variants in thevariants documentation.

Customizing your theme

Customizing shadows

Use the--shadow-* theme variables to customize the box shadow utilities in your project:

@theme {  --shadow-3xl:0 35px 35px rgba(0, 0, 0, 0.25);}

Now theshadow-3xl utility can be used in your markup:

<div class="shadow-3xl">  <!-- ... --></div>

Learn more about customizing your theme in thetheme documentation.

Customizing inset shadows

Use the--inset-shadow-* theme variables to customize the inset box shadow utilities in your project:

@theme {  --inset-shadow-md:inset 0 2px 3px rgba(0, 0, 0, 0.25);}

Now theinset-shadow-md utility can be used in your markup:

<div class="inset-shadow-md">  <!-- ... --></div>

Learn more about customizing your theme in thetheme documentation.

Customizing shadow colors

Use the--color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue:#243c5a;}

Now utilities likeshadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, andinset-ring-regal-blue can be used in your markup: