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

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

export const title = "filter: drop-shadow()";
export const description = "Utilities for applying drop-shadow filters to an element.";

<ApiTable
  rows={[
    ["drop-shadow-xs", "filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */"],
    ["drop-shadow-sm", "filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-md", "filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */"],
    ["drop-shadow-lg", "filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-xl", "filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */"],
    ["drop-shadow-2xl", "filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */"],
    ["drop-shadow-none", "filter: drop-shadow(0 0 #0000);"],
    ["drop-shadow-(<custom-property>)", "filter: drop-shadow(var(<custom-property>));"],
    ["drop-shadow-(color:<custom-property>)", "--tw-drop-shadow-color: var(<custom-property>);"],
    ["drop-shadow-[<value>]", "filter: drop-shadow(<value>);"],
    ["drop-shadow-inherit", "--tw-drop-shadow-color: inherit;"],
    ["drop-shadow-current", "--tw-drop-shadow-color: currentColor;"],
    ["drop-shadow-transparent", "--tw-drop-shadow-color: transparent;"],
    ...Object.entries(colors).map(([name, value]) => [
      `drop-shadow-${name}`,
      `--tw-drop-shadow-color: var(--color-${name}); /* ${value} */`,
    ]),
  ]}
/>

## Examples

### Basic example

Use utilities like `drop-shadow-sm` and `drop-shadow-xl` to add a drop shadow to an element:

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-md</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-md" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-lg</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-lg" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
    </div>
  }
</Example>

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

</Figure>

This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use [box shadow](/docs/box-shadow) instead.

### Changing the opacity

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

<Figure>

<Example padding={false}>
  {
    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/25</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl/25" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-white"
          />
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:drop-shadow-xl,drop-shadow-xl/25,drop-shadow-xl/50] -->
<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>
```

</Figure>

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

### Setting the shadow color

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 items-end p-8 max-sm:grid-cols-1">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-cyan-500/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-cyan-500/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-cyan-500"
          />
        </svg>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-indigo-500/50</p>
        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-indigo-500/50" viewBox="0 0 84 84">
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            className="fill-indigo-500"
          />
        </svg>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:drop-shadow-cyan-500/50,drop-shadow-indigo-500/50] -->
<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>
```

</Figure>

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

### Removing a drop shadow

Use the `drop-shadow-none` utility to remove an existing drop shadow from an element:

<Figure>

```html
<!-- [!code classes:dark:drop-shadow-none] -->
<svg class="drop-shadow-lg dark:drop-shadow-none">
  <!-- ... -->
</svg>
```

</Figure>

### Using a custom value

<UsingACustomValue element="svg" utility="drop-shadow" value="0_35px_35px_rgba(0,0,0,0.25)" name="drop shadow" />

### Responsive design

<ResponsiveDesign
  element="svg"
  property="filter: drop-shadow()"
  defaultClass="drop-shadow-md"
  featuredClass="drop-shadow-xl"
/>

## Customizing your theme

### Customizing drop shadows

<CustomizingYourTheme
  element="svg"
  utility="drop-shadow"
  name="drop shadow"
  customName="3xl"
  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
/>

### Customizing shadow colors

<CustomizingYourThemeColors element="svg" utility="drop-shadow" />