text-shadow

Adding shadows to text.

Overview

Examples

Add a text shadow

Use text-shadow:* to apply a shadow to glyphs.

<h1 class="text-shadow:0|1px|2px|black/.2">    Readable heading</h1>

@layer utilities {    .text-shadow\:0\|1px\|2px\|black\/\.2 {        text-shadow: 0 1px 2px color-mix(in oklab, oklch(0% 0 none) 20%, transparent)    }}

Use text shadows sparingly

Text shadows can help over images, but they can also blur small text. Prefer solid contrast for body copy and reserve text shadows for display text or media overlays.

<h2 class="fg:white text-shadow:0|1px|3px|black/.45">    Mountain retreat</h2>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="text-shadow:none text-shadow:0|1px|2px|black/.2@sm text-shadow:none@print">...</div>

Use box-shadow for element shadows.