text-shadow
Paint shadows behind glyphs without changing their layout.
Overview
| Class | Declarations |
|---|---|
text-shadow:<value> | text-shadow: <value>;
|
Examples
Add a text shadow
text-shadow:0|2px|4px|color-mix(in|oklab,var(--color-blue-50)|40%,transparent) sets the horizontal offset, vertical offset, blur radius and color. Compare the same glyphs with and without the shadow.
<!-- No shadow --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-shadow:none"> Clear type</p><!-- 0px x · 2px y · 4px blur --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-shadow:0|2px|4px|color-mix(in|oklab,var(--color-blue-50)|40%,transparent)"> Clear type</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-shadow\:0\|2px\|4px\|color-mix\(in\|oklab\,var\(--color-blue-50\)\|40\%\,transparent\) { text-shadow: 0 2px 4px color-mix(in oklab, var(--color-blue-50) 40%, transparent) }}Text shadows follow glyphs rather than the element’s border box. They do not expand its layout dimensions.
Use text shadows sparingly
Give overlay text a readable background before adding a shadow. Both examples below include the same dark surface; the shadow only changes the title’s paint.
<!-- Dark surface · without shadow --><div class="p-md r-sm bg-slate-80"> <h2 id="target" class="m:0 font-3xl leading:1.5 text-shadow:none fg-white" > Open the canvas </h2></div><!-- Dark surface · with shadow --><div class="p-md r-sm bg-slate-80"> <h2 id="target" class="m:0 font-3xl leading:1.5 text-shadow:0|2px|4px|color-mix(in|oklab,oklch(0%|0|none)|40%,transparent) fg-white" > Open the canvas </h2></div>A shadow is not a contrast guarantee. Check the actual background and text size, especially over changing images; keep ordinary body copy clear.
Apply conditionally
Resize past sm to add a shadow on screen. Print removes the shadow while keeping the same text, foreground and size.
<!-- Screen shadow · plain print --><p id="target" class="inline-block max-w:100% m:0 font-4xl font-semibold leading:1.5 text-shadow:none text-shadow:none@print text-shadow:0|2px|4px|color-mix(in|oklab,var(--color-blue-50)|40%,transparent)@screen@sm"> Clear type</p>Use box-shadow to shadow the element’s box instead of its glyphs.