How to add a text shadow
Short answer
text-shadow takes the horizontal and vertical offset, the blur and the color:
<p style="font-size: 32px; font-weight: 700; margin: 0; text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);">Soft shadow</p>A glow and depth
With no offset and a large blur you get a glow. Several comma-separated shadows are drawn one under another:
<div style="padding: 12px; background: black;">
<p style="font-size: 28px; margin: 0; color: white; text-shadow: 0 0 8px deepskyblue, 0 0 16px deepskyblue;">Neon</p>
<p style="font-size: 28px; margin: 0; color: gold; text-shadow: 1px 1px 0 orange, 2px 2px 0 darkorange, 3px 3px 0 sienna;">Retro 3D</p>
</div>Text over a photo
White text gets lost on a busy picture. A soft dark shadow makes it readable on any background:
<div style="display: grid; place-items: center; height: 140px; background: url(/media/photo-400x250.jpg) center / cover;">
<h2 style="margin: 0; color: white; text-shadow: 0 1px 6px rgb(0 0 0 / 80%);">Mountain trip</h2>
</div>Common mistake
A hard dark shadow with no blur on normal text makes it look dirty and hard to read. Body text does not need a shadow at all, and in headings use a small offset and a soft semi-transparent blur.
Functions used in this recipe
- text-shadow — A shadow behind the letters of the text.
- color — The color of the text (and the default color of borders and SVG icons).