text-shadow property in CSS

Text styling is an important factor utilized to enhance website elements. It includes various HTML elements such as links, images, and buttons that must be synchronized and consistent. Also, CSS can ensure that the added text on a web page is nicely synced. For this purpose, several text features can be used, including text size, font color, text orientation, and font color. “text-shadow” is also included in the list of these fantastic properties.

This article will discuss the text-shadow property and its related options with the help of suitable examples.

text-shadow property in CSS

In CSS, you can utilize the “text-shadow” property for adding shadows to the HTML text elements. It comprises different types of shadows that can be applied using internal, external, or inline CSS.

The syntax of the text-shadow property in CSS is given below.

Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|
inherit;

The attributes of text-shadow value are described below.

Required Values
h-shadow: This value is used to specify the horizontal position of the text-shadow. Negative values can be used to move the shadow to the left side.

v-shadow: This value is required to set the vertical position of a shadow. v-shadow also accepts the negative values as offset-y.

All the values mentioned above will be utilized in the below-given example.

Example
In the below-given example, we have set “1px” as “h-shadow” and “3px” as “y-shadow” values. Also, the “color” of the text-shadow is specified as “red”:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 1px 3px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Output

Optional Values

blur-radius: It is utilized to blur the text-shadow and its default value is 0.

none: It shows that no shadow effect is added to the text.

color: This option is utilized for specifying the text-shadow color.

initial: This option is utilized for specifying the default value of text-shadow property.

inherit: You can inherit this property from its parent HTML element.

Now, let’s look at some examples related to the provided text-shadow values.

Example: Adding color to text-shadow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 1px 3px orange;
}
</style>
</head>
<body>
<h1>Text-Shadow Color Effect</h1>
</body>
</html>

The execution of the above-given code will add an “orange” color effect to the added text-shadow:

Following example shows the blur effect on a text-shadow property.

Example: Adding blur effect to text-shadow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 1px 3px 6px orange;
}
</style>
</head>
<body>
<h1>Text-Shadow Blur Effect!</h1>
</body>
</html>

Output

The text-shadow property also accepts the list of shadows separated by the commas. The following example will demonstrate the procedure to perform the specified operation.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 1px 2px 3px red, 2px 4px 5px blue;
}
</style>
</head>
<body>
<h1>Text-shadow with with multiple text glow.</h1>
</body>
</html>

Output

We have provided the most essential information related to the usage of “text-shadow” property in CSS.

Conclusion

In CSS, text-shadow property is utilized for adding shadows to the HTML text elements. It is primarily used to add colors to the text, blur its shadow and set its horizontal and vertical position. This article provides a thorough guide about the procedure of using horizontal and vertical dimensions of the text-shadow, blur the text-shadow, and lastly using colors with the text-shadow property of CSS.

text-shadow property in CSS

text-shadow property in CSS

Conclusion

About the author

Sharqa Hameed