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} */,
]),
]}
/>
Use utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element:
<!-- [!code classes:shadow-md,shadow-lg,shadow-xl] -->
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
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><!-- [!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>
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.
Use utilities like shadow-indigo-500 and shadow-cyan-500/50 to change the color of a box shadow:
<!-- [!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>
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Use utilities like inset-shadow-xs and inset-shadow-sm to apply an inset box shadow to an element:
<!-- [!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>
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.
Use utilities like inset-shadow-indigo-500 and inset-shadow-cyan-500/50 to change the color of an inset box shadow:
<!-- [!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>
By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
Use ring or ring-<number> utilities like ring-2 and ring-4 to apply a solid box-shadow to an element:
<!-- [!code classes:ring,ring-2,ring-4] -->
<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>
By default rings match the currentColor of the element they are applied to.
Use utilities like ring-indigo-500 and ring-cyan-500/50 to change the color of a ring:
<!-- [!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>
By default rings have an opacity of 100% but you can adjust this using the opacity modifier.
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:
<!-- [!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>
By default inset rings match the currentColor of the element they are applied to.
Use utilities like inset-ring-indigo-500 and inset-ring-cyan-500/50 to change the color of an inset ring:
<!-- [!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>
By default inset rings have an opacity of 100% but you can adjust this using the opacity modifier.
Use the shadow-none, inset-shadow-none,ring-0, and inset-ring-0 utilities to remove an existing box shadow from an element:
<!-- [!code classes:shadow-none] -->
<div class="shadow-none ..."></div>
<UsingACustomValue utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} name="box shadow" value="0_35px_35px_rgba(0,0,0,0.25)" />
<CustomizingYourTheme utility="shadow" themeKey="shadow" name="box shadow" customName="3xl" customValue="0 35px 35px rgba(0, 0, 0, 0.25)" />
<CustomizingYourTheme utility="inset-shadow" themeKey="inset-shadow" name="inset box shadow" customName="md" customValue="inset 0 2px 3px rgba(0, 0, 0, 0.25)" />
<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />