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} */,
]),
]}
/>
Use utilities like drop-shadow-sm and drop-shadow-xl to add a drop shadow to an element:
<!-- [!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>
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 instead.
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><!-- [!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>
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.
Use utilities like drop-shadow-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:
<!-- [!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>
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Use the drop-shadow-none utility to remove an existing drop shadow from an element:
<!-- [!code classes:dark:drop-shadow-none] -->
<svg class="drop-shadow-lg dark:drop-shadow-none">
<!-- ... -->
</svg>
<ResponsiveDesign element="svg" property="filter: drop-shadow()" defaultClass="drop-shadow-md" featuredClass="drop-shadow-xl" />
<CustomizingYourTheme element="svg" utility="drop-shadow" name="drop shadow" customName="3xl" customValue="0 35px 35px rgba(0, 0, 0, 0.25)" />