How to apply shadow effects to text with CSS
How to Apply Shadow Effects on Text with CSS
We can use the “text-shadow” property provided by CSS to apply shadow effects to text elements. The text-shadow property takes a list of values representing the 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
The values and their meanings are listed below –
- Offset-x – This represents the horizontal distance of the shadow from the element.
-
offset_y – This represents the vertical distance of the shadow from the element.
-
blur-radius – This 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 to the “h3” element and give the shadow a y offset and 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>
Example 2
In this example, we’ll apply a shadow effect to the “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>
Summary
In this article, we learned about the “text-shadow” property and used it to apply shadow effects on text elements through two different examples. In the first example, we applied a “red” vertical shadow effect, while in the second example, we applied a “green” vertical and horizontal shadow effect with a blur radius of 5px.