# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/box-shadow.mdx

import { ApiTable } from "@/components/api-table.tsx";
import {
  CustomizingYourTheme,
  CustomizingYourThemeColors,
  ResponsiveDesign,
  UsingACustomValue,
} from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import colors from "./utils/colors";

export const title = "box-shadow";
export const description = "Utilities for controlling the box shadow of an element.";

<ApiTable
  rows={[
    // Shadows
    ["shadow-2xs", "box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */"],
    ["shadow-xs", "box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */"],
    ["shadow-sm", "box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */"],
    [
      "shadow-md",
      "box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */",
    ],
    [
      "shadow-lg",
      "box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */",
    ],
    [
      "shadow-xl",
      "box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */",
    ],
    ["shadow-2xl", "box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */"],
    ["shadow-none", "box-shadow: 0 0 #0000;"],
    ["shadow-(<custom-property>)", "box-shadow: var(<custom-property>);"],
    ["shadow-(color:<custom-property>)", "--tw-shadow-color: var(<custom-property>);"],
    ["shadow-[<value>]", "box-shadow: <value>;"],
    // Shadow colors
    ["shadow-inherit", "--tw-shadow-color: inherit;"],
    ["shadow-current", "--tw-shadow-color: currentColor;"],
    ["shadow-transparent", "--tw-shadow-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `shadow-${name}`,
      `--tw-shadow-color: var(--color-${name}); /* ${value} */`,
    ]),
    // Inset shadows
    ["inset-shadow-2xs", "box-shadow: var(--inset-shadow-2xs); /* inset 0 1px rgb(0 0 0 / 0.05) */"],
    ["inset-shadow-xs", "box-shadow: var(--inset-shadow-xs); /* inset 0 1px 1px rgb(0 0 0 / 0.05) */"],
    ["inset-shadow-sm", "box-shadow: var(--inset-shadow-sm); /* inset 0 2px 4px rgb(0 0 0 / 0.05) */"],
    ["inset-shadow-none", "box-shadow: inset 0 0 #0000;"],
    ["inset-shadow-(<custom-property>)", "box-shadow: var(<custom-property>);"],
    ["inset-shadow-[<value>]", "box-shadow: <value>;"],
    // Inset shadow colors
    ["inset-shadow-inherit", "--tw-inset-shadow-color: inherit;"],
    ["inset-shadow-current", "--tw-inset-shadow-color: currentColor;"],
    ["inset-shadow-transparent", "--tw-inset-shadow-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `inset-shadow-${name}`,
      `--tw-inset-shadow-color: var(--color-${name}); /* ${value} */`,
    ]),
    // Rings
    ["ring", "--tw-ring-shadow: 0 0 0 1px;"],
    ["ring-<number>", "--tw-ring-shadow: 0 0 0 <number>px;"],
    ["ring-(<custom-property>)", "--tw-ring-shadow: 0 0 0 var(<custom-property>);"],
    ["ring-[<value>]", "--tw-ring-shadow: 0 0 0 <value>;"],
    // Ring colors
    ["ring-inherit", "--tw-ring-color: inherit;"],
    ["ring-current", "--tw-ring-color: currentColor;"],
    ["ring-transparent", "--tw-ring-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `ring-${name}`,
      `--tw-ring-color: var(--color-${name}); /* ${value} */`,
    ]),
    // Inset rings
    ["inset-ring", "--tw-inset-ring-shadow: inset 0 0 0 1px"],
    ["inset-ring-<number>", "--tw-inset-ring-shadow: inset 0 0 0 <number>px"],
    ["inset-ring-(<custom-property>)", "--tw-inset-ring-shadow: inset 0 0 0 var(<custom-property>);"],
    ["inset-ring-[<value>]", "--tw-inset-ring-shadow: inset 0 0 0 <value>;"],
    // Inset ring colors
    ["inset-ring-inherit", "--tw-inset-ring-color: inherit;"],
    ["inset-ring-current", "--tw-inset-ring-color: currentColor;"],
    ["inset-ring-transparent", "--tw-inset-ring-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `inset-ring-${name}`,
      `--tw-inset-ring-color: var(--color-${name}); /* ${value} */`,
    ]),
  ]}
/>

## Examples

### Basic example

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

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-10">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-md</p>
        <div className="size-24 rounded-lg bg-white shadow-md"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-lg</p>
        <div className="size-24 rounded-lg bg-white shadow-lg"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl</p>
        <div className="size-24 rounded-lg bg-white shadow-xl"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-md,shadow-lg,shadow-xl] -->
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
```

</Figure>

### Changing the opacity

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

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-10">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl</p>
        <div className="size-24 rounded-lg bg-white shadow-xl"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl/20</p>
        <div className="size-24 rounded-lg bg-white shadow-xl/20"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-xl/30</p>
        <div className="size-24 rounded-lg bg-white shadow-xl/30"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-xl,shadow-xl/20,shadow-xl/30] -->
<div class="shadow-xl ..."></div>
<div class="shadow-xl/20 ..."></div>
<div class="shadow-xl/30 ..."></div>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="flex flex-col justify-center gap-8 py-6 sm:flex-row sm:gap-12">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-cyan-500/50
        </p>
        <button className="rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-blue-500/50
        </p>
        <button className="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-blue-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          shadow-indigo-500/50
        </p>
        <button className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/50 focus:outline-none">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-cyan-500/50,shadow-blue-500/50,shadow-indigo-500/50] -->
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-2xs</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-2xs ring-black/5"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-xs</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-xs ring-black/5"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-sm</p>
        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-sm ring-black/5"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-shadow-2xs,inset-shadow-xs,inset-shadow-sm] -->
<div class="inset-shadow-2xs ..."></div>
<div class="inset-shadow-xs ..."></div>
<div class="inset-shadow-sm ..."></div>
```

</Figure>

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:

<Figure>

<Example padding={false}>
  {
    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500</p>
        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500/50</p>
        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500/50"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-shadow-indigo-500,inset-shadow-indigo-500/75] -->
<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>
```

</Figure>

By default colored 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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-2</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-4</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-4 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ring,ring-2,ring-4] -->
<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>
```

</Figure>

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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-blue-500</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          ring-blue-500/50
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ring-blue-500,ring-blue-500/50] -->
<button class="ring-2 ring-blue-500 ...">Subscribe</button>
<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>
```

</Figure>

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

### 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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-2</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-4</p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-4 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-ring,inset-ring-2,inset-ring-4] -->
<button class="inset-ring ...">Subscribe</button>
<button class="inset-ring-2 ...">Subscribe</button>
<button class="inset-ring-4 ...">Subscribe</button>
```

</Figure>

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

### 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:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          inset-ring-blue-500
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          inset-ring-blue-500/50
        </p>
        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
          Subscribe
        </button>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inset-ring-blue-500,inset-ring-blue-500/50] -->
<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>
```

</Figure>

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

### 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:

<Figure>

<Example padding={false}>
  {
    <div className="flex items-center justify-around gap-4 bg-white p-6 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-none</p>
        <div className="size-24 rounded-lg outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed"></div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:shadow-none] -->
<div class="shadow-none ..."></div>
```

</Figure>

### Using a custom value

<UsingACustomValue
  utilities={["shadow", "inset-shadow", "ring", "inset-ring"]}
  name="box shadow"
  value="0_35px_35px_rgba(0,0,0,0.25)"
/>

### Responsive design

<ResponsiveDesign property="box-shadow" defaultClass="shadow-none" featuredClass="shadow-lg" />

## Customizing your theme

### Customizing shadows

<CustomizingYourTheme
  utility="shadow"
  themeKey="shadow"
  name="box shadow"
  customName="3xl"
  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
/>

### Customizing inset shadows

<CustomizingYourTheme
  utility="inset-shadow"
  themeKey="inset-shadow"
  name="inset box shadow"
  customName="md"
  customValue="inset 0 2px 3px rgba(0, 0, 0, 0.25)"
/>

### Customizing shadow colors

<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />