CSS Text Shadow
The text-shadow property adds one or more shadows behind text using offsets, an optional blur, and a color.
The <text-shadow> property casts a shadow behind the characters of text. It is useful for adding depth to headings or improving the legibility of text placed over an image.
The value parts
- Horizontal offset: how far right (positive) or left (negative) the shadow sits.
- Vertical offset: how far down (positive) or up (negative) the shadow sits.
- Blur radius: optional, how soft the shadow is; larger values are more diffuse.
- Color: the color of the shadow.
A soft drop shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<h1>Adventure Awaits</h1>
</body>
</html>Layering multiple shadows
You can apply several shadows at once by separating them with commas. Each is drawn on top of the next, which is handy for glow or outline effects.
A glow effect
<!DOCTYPE html>
<html>
<head>
<style>
.neon {
color: #ffffff;
text-shadow: 0 0 5px #00643c, 0 0 10px #00643c;
}
</style>
</head>
<body>
<div style="background-color: #111111; padding: 16px;">
<div class="neon">OPEN</div>
</div>
</body>
</html>Note: Keep shadows subtle on body text. Heavy shadows reduce contrast and can make small text harder to read.
Exercise: CSS Text
What does `text-transform: capitalize;` do to the underlying HTML text content?
