How to apply shadow effect on text using CSS?-CSS Tutorial-php.cn

How to apply shadow effect on text using CSS?

王林

Release： 2023-08-23 23:17:09

forward

1208 people have browsed it

如何使用 CSS 在文本上应用阴影效果？

We can use the "text-shadow" property provided by CSS to apply a shadow effect on text elements. The "text-shadow" property accepts a list of values representing the shadow's X and Y offset relative to the element, the shadow's blur radius, and the shadow's color. The values are listed in the syntax below -

grammar

text-shadow: offset_y offset_x blur-radius color

Copy after login

The following is a list of values and their meanings -

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 a shadow effect on an "h3" element and give the shadow a y offset as well as a 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>

Copy after login

Example 2

In this example, we will apply a shadow effect on an "h3" element and give the shadow a y offset, x offset, transparency, and 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>

Copy after login

in conclusion

In this article, we learned about the "text-shadow" property and applied shadow effects to text elements using CSS, demonstrated through 2 different examples. In the first example, we applied a vertical shadow effect with the color "red", while in the second example we applied a vertical and a horizontal shadow effect with the color "green" and a blur radius of 5px .

The above is the detailed content of How to apply shadow effect on text using CSS?. For more information, please follow other related articles on the PHP Chinese website!