CSS text-shadow property is used to add shadow to the text. For example,
h1 {
text-shadow: 1px 1px 2px red;
}
Browser Output
Here, the text-shadow property creates a red shadow behind the text of the h1 element.
Syntax of Text-Shadow
The syntax of the text-shadow property is as follows,
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
Here,
h-shadow: specifies the length of horizontal shadow; negative values are allowedv-shadow: specifies the length of vertical shadow; negative values are allowedblur-radius: specifies the value to blur the shadowcolor: specifies the color of the shadownone: specifies the default value, no shadowinitial: sets the default valueinherit: inherits the value from its parent element
Note: The values of horizontal shadow and vertical shadow are required for the text-shadow property.
Example: CSS Text-Shadow Property
Let's see an example of text-shadow property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-shadow</title>
</head>
<body>
<h1>Pride & Prejudice (Jane Austen)</h1>
</body>
</html>
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Here, the values used in our text-shadow property are,
2px- horizontal offset2px- vertical offset4px- blur radiusrgba(0, 0, 0, 0.5)- color of the shadow (semi-transparentblack)
Note: Offset refers to the distance between the shadow and the text element.
Multiple Shadows
We can provide a list of comma-separated values in the text-shadow property for creating multiple shadows. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-shadow</title>
</head>
<body>
<h1>Pride & Prejudice (Jane Austen)</h1>
</body>
</html>
h1 {
/* create a text shadow using multiple values */
text-shadow: 1px 1px 1px black, 3px 3px 5px blue;
}
Browser Output
In the above example, we have the following CSS declaration having two values for the text-shadow property,
text-shadow: 1px 1px 1px black, 3px 3px 5px blue;
Here,
1px 1px 1px black- creates the first shadow with1pxof horizontal and vertical shadow offset and1pxof blur radius withblackcolor
3px 3px 5px blue- creates second shadow with3pxof horizontal and vertical shadow offset, and5pxof blur radius withbluecolor
The combination of both shadows creates a more complex and visually appealing effect.