LAST UPDATED: AUGUST 5, 2021
How to apply shadow effect on text using CSS?
Adding simple text to the webpage will make the webpage dull and boring. So styling the text plays an important role. We can make text stylish using the shadow effect.
In this tutorial, we will be learning to apply the shadow effect on text using CSS.
CSS text-shadow property
The CSS text-shadow property is used to add shadow to the text. The values added to the text-shadow are separated by space.
The text-shadow is generally specified with two or three values and can be followed by some color values.
The first two values represent horizontal value and vertical value respectively. The third value is optional which represents blur-radius.
Example: Add text-shadow using CSS property
In this example, we have added text-shadow to the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
h2 {
text-shadow: 2px 3px;
}
p {
text-shadow: 2px 3px red;
}
</style>
</head>
<body>
<h2> Text shadow </h2>
<p> Text shadow with color </p>
</body>
</html>
Output
Here is the output of the above example.
Multiple shadows
We can also add multiple shadows to the text. To add multiple shadows, use the list of values separated by commas.
Example: Add text shadow with multiple shadows
Here is the example to add multiple shadow effects to the text.
Conclusion
In this tutorial, we have learned to add text-shadow using CSS. The text-shadow property is used to do so and we can also add multiple text shadows by using CSS properties.,
