CSS propertyTypography
text-shadow
Adds a shadow beneath text.
- Initial value
none- Inherited
- Yes
- Animatable
- yes, as a list of shadows
- Applies to
- all elements
- JavaScript
element.style.textShadow = "0 2px 8px rgba(0,0,0,.6)"
Example
#CSS
.hero-title {
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}Example HTML
<div style="padding: 32px 16px; border-radius: 12px; background: url('/collections/covers/jak-zostac-programista.webp') center / cover;">
<h2 class="hero-title" style="margin: 0; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7);">Become a Developer</h2>
</div>Preview
Definition and usage
#The text-shadow property draws a shadow under the letters. You give a horizontal offset, a vertical offset, optionally a blur, and a color, for example 2px 2px 4px rgba(0, 0, 0, 0.5).
You can add several shadows separated by commas. This lets you create glow effects, an outline, or text that looks three-dimensional.
A subtle shadow improves the readability of light text on a photo. Too strong a shadow, though, makes the letters look blurry.
Syntax
#Syntax
text-shadow: none | <offset-x> <offset-y> <blur>? <color>? [, …]*;Values
#- Text with no shadow at all.
- A hard, offset shadow with no blur.
- A glow around the letters.
list
A combination of a glow and a hard shadow.
Values in practice
#none
Text with no shadow at all.
.demo { text-shadow: none; }3px 3px 0 #7c3aed
A hard, offset shadow with no blur.
.demo { text-shadow: 3px 3px 0 #7c3aed; }0 0 12px #a78bfa
A glow around the letters.
.demo { text-shadow: 0 0 12px #a78bfa; }multiple shadows
A combination of a glow and a hard shadow.
.demo { text-shadow: 0 0 8px #38bdf8, 3px 3px 0 #1e3a8a; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- On photos, a translucent overlay behind the text is often a better solution than a strong shadow.
- A shadow doesn’t change contrast as far as accessibility tools are concerned. Check readability without it too.
Spotted a mistake or missing an example? Write to us.