The text-shadow property adds a shadow effect to text.
The details of the shadow are specified by a number of values.
These include x-offset, y-offset, blur-radius, and color.
Text with a drop shadow effect.
This text has a shadow.
<p style="text-shadow: 2px 2px #ccc; font-size: 22px;">
This text has a shadow.
</p>
The text-shadow property adds a shadow effect to the text and its decorations.
Text shadow accepts up to four values:
If no color is provided, it inherits the text color.
Only x-offset and y-offset are required to get a shadow effect.
text-shadow: x-offset y-offset blur-radius color |
none | initial | inherit;
| Value | Description |
|---|---|
| none | Default, no shadow. |
| x-offset | Required, horizontal shadow position. Accepts negative values. |
| y-offset | Required, vertical shadow position. Accepts negative values. |
| blur-radius | Optional, blur radius. Default value is 0. |
| color | Shadow color. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different text-shadow values.
Text with a shadow
<style>
.text-shadow-example {
font-size: 22px;
text-shadow: 2px 2px 8px orangered;
}
</style>
<p class="text-shadow-example">
Text with a shadow
</p>
White text with a shadow creates an outline effect.
Outline effect with white text and shadow
<style>
.outline-text {
font-size: 30px;
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
<p class="outline-text">
Outline effect with white text and shadow
</p>
text-shadowAn inner shadow created with a negative offset value.
Text with an inner shadow
<style>
.inner-shadow {
text-shadow: -1px -1px #444;
font-size: 40px;
font-weight: bold;
color: aliceblue;
}
</style>
<p class="inner-shadow">
Text with an inner shadow
</p>
This table shows when text-shadow support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
9.6 | Oct 2008 |
 Safari
|
4.0 | Jun 2009 |
