Text shadow

Utilities for controlling the text shadow of an element


Class reference

ClassProperties
text-shadowtext-shadow: 0px 4px 8px rgba(123, 116, 121, 0.16), 0px 0px 2px rgba(30, 0, 51, 0.04)
text-shadow-xstext-shadow: 0px 0.5px 2px rgba(123, 116, 121, 0.16), 0px 0px 1px rgba(30, 0, 51, 0.08)
text-shadow-smtext-shadow: 0px 2px 4px rgba(123, 116, 121, 0.16), 0px 0px 1px rgba(30, 0, 51, 0.04)
text-shadow-mdtext-shadow: 0px 4px 8px rgba(123, 116, 121, 0.16), 0px 0px 2px rgba(30, 0, 51, 0.04)
text-shadow-lgtext-shadow: 0px 8px 16px rgba(123, 116, 121, 0.16), 0px 2px 4px rgba(30, 0, 51, 0.04)
text-shadow-xltext-shadow: 0px 16px 24px rgba(123, 116, 121, 0.16), 0px 2px 8px rgba(30, 0, 51, 0.04)
text-shadow-2xltext-shadow: 0px 20px 32px rgba(123, 116, 121, 0.24), 0px 2px 8px rgba(30, 0, 51, 0.08)
text-shadow-innertext-shadow: inset 0px 0.5px 4px rgba(30, 0, 51, 0.32)
text-shadow-inner-smtext-shadow: inset 0px 0.25px 1.25px rgba(30, 0, 51, 0.1)
text-shadow-dark-xstext-shadow: 0px 0.5px 2px rgba(0, 0, 0, 0.32), 0px 0px 1px rgba(40, 41, 61, 0.08)
text-shadow-dark-smtext-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32), 0px 0px 1px rgba(0, 0, 0, 0.04)
text-shadow-dark-mdtext-shadow: 0px 4px 8px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.04)
text-shadow-dark-lgtext-shadow: 0px 8px 16px rgba(0, 0, 0, 0.32), 0px 2px 4px rgba(0, 0, 0, 0.04)
text-shadow-dark-xltext-shadow: 0px 16px 24px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.04)
text-shadow-dark-2xltext-shadow: 0px 20px 32px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.08)
text-shadow-dark-innertext-shadow: inset 0px 0.5px 4px rgba(0, 0, 0, 0.32)
text-shadow-dark-inner-smtext-shadow: inset 0px 0.25px 1.25px rgba(0, 0, 0, 0.2)
text-shadow-nonetext-shadow: none

# Light shadow

Use the .text-shadow-xs, .text-shadow-sm, .text-shadow, .text-shadow-md, .text-shadow-lg, .text-shadow-xl, or .text-shadow-2xl utilities to apply text shadows to elements with a light background.

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

<p class="text-shadow-sm">The quick brown fox ...</p>
<p class="text-shadow-lg">The quick brown fox ...</p>
<p class="text-shadow-2xl">The quick brown fox ...</p>

# Dark shadow

Use the .text-shadow-dark-xs, .text-shadow-dark-sm, .text-shadow, .text-shadow-dark-md, .text-shadow-dark-lg, .text-shadow-dark-xl, or .text-shadow-dark-2xl utilities to apply text shadows to elements with a dark background.

The quick brown fox ...

The quick brown fox ...

The quick brown fox ...

<p class="text-shadow-dark-sm">The quick brown fox ...</p>
<p class="text-shadow-dark-lg">The quick brown fox ...</p>
<p class="text-shadow-dark-2xl">The quick brown fox ...</p>

# No shadow

Use .text-shadow-none to remove an existing text shadow from an element. This is most commonly used to remove a text shadow that was applied at a smaller breakpoint.

The quick brown fox ...

<p class="text-shadow-none">The quick brown fox ...</p>

# Responsive

To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. For example, use md:text-shadow-lg to apply the text-shadow-lg utility at only medium screen sizes and above.

<p class="text-shadow md:text-shadow-lg">...</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.