Learn how to use the text-shadow property to add subtle depth, bold hard shadows, and glowing effects to your headings and text.
💡 The Concept
The text-shadow property lets you add a shadow behind text. It works great for headings — adding subtle depth, a bold hard shadow, or even a glowing effect. On images, what usually works best is to use a bold white font with a black shadow, like in the image below:
It takes three required values and one optional one: horizontal offset, vertical offset, blur radius, and color.
text-shadow: 2px 2px 2px black;
Here’s what each value does:
Horizontal offset — how far the shadow shifts left or right (positive = right, negative = left)
Vertical offset — how far the shadow shifts up or down (positive = down, negative = up)
Blur radius — how soft the shadow is (0 = sharp edge, higher = softer)
One important rule: the shadow color should contrast with your text color, not match it. White text needs a dark shadow; dark text needs a dark shadow too (just offset so it shows). If the shadow color is too close to the text color, the shadow blends in and the text looks blurry instead of crisp. This is why white text with a black shadow is such a reliable combination.
Exercise: Try It Yourself
Step 1. Open JSFiddle and paste this HTML into the HTML panel:
Step 2. Open the Text Shadow Generator, design a dark shadow for the h1 to make it pop over the background image, copy the CSS, and add it to the CSS panel.
Step 3. Try a different shadow for the h2. Run your JSFiddle.
📌 Tools of the Trade: Use the Text Shadow Generator to experiment with shadow values and copy the ready-to-use CSS. Bookmark the Tools of the Trade page for quick access to all course tools.
Frequently Asked Questions
Does text-shadow work on all text elements, or just headings?
It works on any element that contains text — headings, paragraphs, links, buttons, and more. It is most commonly used on headings because the effect is more visible at larger font sizes. On small body text, a shadow can actually hurt readability, so use it sparingly outside of headings.
Can I stack multiple text shadows?
Yes. Separate each shadow with a comma: text-shadow: 1px 1px 2px black, 0 0 8px blue;. The shadows are applied in order, with the first one on top. Stacking is commonly used to combine a sharp offset shadow with a soft glow.
What is the difference between text-shadow and box-shadow?
text-shadow applies a shadow specifically to the text characters themselves. box-shadow applies a shadow to the rectangular box surrounding an element. If you add box-shadow to an h1, the shadow follows the invisible box around it, not the shape of the letters.
Can I use text-shadow to create a text outline?
Yes, with a trick. Stack four shadows — one in each direction — with no blur and the same color: text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black;. This simulates an outline. For a cleaner result, the CSS -webkit-text-stroke property is a more modern approach.
Does text-shadow affect readability?
It can, in both directions. A subtle shadow can actually improve readability by adding contrast between text and a complex background — especially white text on a photo. But a heavy or colorful shadow can make text harder to read. As with box shadows, the best text shadows are ones the reader barely notices.
Is there a blur radius limit?
There is no hard limit, but very high values (above 20–30px) tend to make the shadow so diffuse it becomes invisible. Higher blur values are most useful for glow effects where you want a wide, soft light rather than a defined shadow.
Can I animate text-shadow?
Yes. text-shadow is animatable with CSS transitions and animations. A common effect is a subtle shadow that deepens on hover, making a heading feel interactive. Keep animations subtle — a pulsing glow on every heading would quickly become distracting.
★ Key Takeaways
The text-shadow property adds a shadow behind any text on your page. Adjust the offset, blur, and color to get effects ranging from subtle depth to bold drama. That wraps up Category 5 — next up is Category 6, where you will learn advanced link techniques and navigation.
