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.
The attributes of text-shadow value are described below.
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.
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”:
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
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
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.
We have provided the most essential information related to the usage of “text-shadow” property in CSS.
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.