text-shadow
CSS text-shadow Property
The CSS text-shadow property is used to add shadows to the text. You can choose colors from here: HTML colors.
The text-shadow property is one of the CSS3 properties.
Each shadow is specified by 2 to 3 length values and a <color>. The first value sets the horizontal distance(x-offset), the second value sets the vertical distance(y-offset), the third value sets the blur radius and color value sets the shadow color.
Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
The x-offset and the y-offset are obligatory,the third value is optional.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS3 |
| DOM Syntax | object.style.textShadow = “1px 3px 3px #8ebf42”; |
Syntax
Syntax
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
Example of the text-shadow property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>
Result
Example of the text-shadow property with the “x-offset”, “y-offset”, “blur-radius” and “color” values:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| h-shadow | The horizontal offset of the shadow. If positive the shadow is drawn on the right side of the text, if negative it is drawn on the left side. | Play it » |
| v-shadow | The vertical offset of the shadow (y-axis). If the value is positive the shadow is below the text, if negative it is drawn above. | Play it » |
| blur-radius | The blur radius defines how big and how much blurred the shadow is. We can’t use negative values. Default value is 0. | Play it » |
| color | Allows us to choose a color of the shadow. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. | Play it » |
| none | No shadow is specified. This is default value of this property. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |