How to Apply Shadow Effect on Text Using CSS?

CSS Web Development Front End Technology

We can apply a shadow effect on a text element using the “text-shadow” property given by CSS. The “text-shadow” property takes a list of values that represents X and Y offsets of the shadow from the element, the blur radius of the shadow, and the color of the shadow. These values are listed in the syntax below −

Syntax

text-shadow: offset_y offset_x blur-radius color

Here the values and their meanings are listed below −

Offset-x − It represents the distance of the shadow from the element in the horizontal direction
Offset-y − It represents the distance of the shadow from the element in the vertical direction
Blur radius − It represents the opacity of the shadow
Color − It represents the color of the shadow

Example 1

In this example, we will apply the shadow effect on an “h3” element and give the shadow a y-offset along with red color

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
   h3 {
      text-shadow: 0 15px 0 red;
   }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Example 2

In this example, we will apply the shadow effect on an “h3” element and give the shadow a y-offset, an x-offset, an opacity, and a green color.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Apply Shadow Effect on Text Using CSS?</title>
   <style>
      h3 {
         text-shadow: 10px 15px 5px green;
      }
   </style>
</head>
<body>
   <h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>

Conclusion

In this article, we learned the “text-shadow” property is, and we used it to apply a shadow effect on a text element using CSS, with the help of 2 different examples. In the first example, we applied a vertical shadow effect of the “red” color, and in the second example, we applied a vertical and a horizontal shadow effect of the “green” color having a blur-radius of 5px.