Text Shadow - Tailwindcss

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 = "text-shadow"; export const description = "Utilities for controlling the shadow of a text element.";

<ApiTable rows={[ ["text-shadow-2xs", "text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) /"], ["text-shadow-xs", "text-shadow: var(--text-shadow-xs); / 0px 1px 1px rgb(0 0 0 / 0.2) /"], [ "text-shadow-sm", "text-shadow: var(--text-shadow-sm); / 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) /", ], [ "text-shadow-md", "text-shadow: var(--text-shadow-md); / 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) /", ], [ "text-shadow-lg", "text-shadow: var(--text-shadow-lg); / 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */", ], ["text-shadow-none", "text-shadow: none;"], ["text-shadow-(<custom-property>)", "text-shadow: var(<custom-property>);"], ["text-shadow-(color:<custom-property>)", "--tw-shadow-color var(<custom-property>);"], ["text-shadow-[<value>]", "text-shadow: <value>;"], ["text-shadow-inherit", "--tw-shadow-color inherit;"], ["text-shadow-current", "--tw-shadow-color currentColor;"], ["text-shadow-transparent", "--tw-shadow-color transparent;"], ...Object.entries(colors).map(([name, value]) => [ text-shadow-${name}, --tw-text-shadow-color var(--color-${name}); /* ${value} */, ]), ]} />

Examples

Basic example

Use utilities like text-shadow-sm and shadow-lg to apply different sized text shadows to a text element:

<Figure> <Example padding={false}> { <div className="relative grid items-center justify-around gap-4 bg-linear-45 from-indigo-400 via-purple-500 to-pink-500 px-6 py-14 text-center text-2xl font-semibold text-white"> <p className="relative text-shadow-2xs">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-xs">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-sm">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-md">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-lg">The quick brown fox jumps over the lazy dog.</p> </div> } </Example>

html

<!-- [!code classes:text-shadow-2xs,text-shadow-xs,text-shadow-sm,text-shadow-md,text-shadow-lg,text-shadow-xl] -->
<p class="text-shadow-2xs ...">The quick brown fox...</p>
<p class="text-shadow-xs ...">The quick brown fox...</p>
<p class="text-shadow-sm ...">The quick brown fox...</p>
<p class="text-shadow-md ...">The quick brown fox...</p>
<p class="text-shadow-lg ...">The quick brown fox...</p>

</Figure>

Changing the opacity

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

<Figure> <Example padding={false}> { <div className="relative grid items-center justify-around gap-4 bg-linear-45 from-indigo-400 via-sky-400 to-emerald-400 px-6 py-14 text-center text-2xl font-semibold text-white"> <p className="relative text-shadow-lg">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-lg/20">The quick brown fox jumps over the lazy dog.</p> <p className="relative text-shadow-lg/30">The quick brown fox jumps over the lazy dog.</p> </div> } </Example>

html

<!-- [!code classes:text-shadow-lg/20,text-shadow-lg/30] -->
<p class="text-shadow-lg ...">The quick brown fox...</p>
<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
<p class="text-shadow-lg/30 ...">The quick brown fox...</p>

</Figure>

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

Setting the shadow color

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

<Figure> <Example> { <div className="relative grid h-48 place-items-center"> <div className="-mr-10 flex gap-4 max-sm:-mr-32"> <button className="relative rounded-full bg-linear-to-b from-sky-300 to-sky-400 to-70% px-4 py-2 text-sm font-semibold text-sky-950 shadow-md ring inset-shadow-2xs ring-sky-500 inset-shadow-white/20 text-shadow-2xs text-shadow-sky-300 dark:ring-sky-500/50"> Book a demo <div className="absolute top-1/2 -left-6/5 size-42 -translate-y-1/2 overflow-hidden rounded-full bg-white/20 p-2 shadow-lg ring-2 ring-black/5 backdrop-blur-sm dark:ring-black/10"> <div className="grid size-full items-center overflow-hidden rounded-full bg-linear-to-b from-sky-300 to-sky-400 to-50% px-5 pb-2 text-[70px] font-semibold whitespace-nowrap text-sky-900 inset-ring-2 inset-ring-black/10 text-shadow-[0px_5px_0px_var(--tw-text-shadow-color)] text-shadow-sky-300"> Book a demo </div> </div> </button> <button className="relative rounded-full bg-linear-to-b from-white/10 to-white/20 to-70% px-4 py-2 text-sm font-semibold text-gray-950 shadow-md ring inset-shadow-2xs ring-black/20 inset-shadow-white/10 dark:text-white dark:text-shadow-2xs"> See pricing </button> </div> </div> } </Example>

html

<!-- [!code classes:text-shadow-sky-300] -->
<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

</Figure>

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

Removing a text shadow

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

html

<!-- [!code classes:dark:text-shadow-none] -->
<p class="text-shadow-lg dark:text-shadow-none">
  <!-- ... -->
</p>

</Figure>

Using a custom value

Responsive design

Customizing your theme

Customizing text shadows

Customizing shadow colors