Preview
The text-shadow property adds a shadow effect to a text. It is a comma-separated list of shadows. For each shadow you add, you can select 3 lengths, and an optional color.
The text-shadow property allows you to add a shadow effect to a text.
Suppose you have an element identified MyDiv that contains a text, and defined as below:
<div id="MyDiv"> My Text </div>;
The text-shadow syntax is as follows:
#MyDiv { text-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}The first two parameters define the position of the shadow on the X axis (horizontal) and Y axis (vertical). The third parameter adds a blur effect, and the fourth parameter is the shadow color.
In the example below, the shadow is 2 pixels to the right and down, has a blur effect of 2 pixels and a black color of opacity 0.7 (fourth parameter of the rgba function).
The text-shadow property is a comma-separated list of shadows. It is therefore possible to accumulate as many shadows as you like, adding the values one behind the other, as below:
#MyDiv { text-shadow: 2px 2px 2px rgba(0,0,0,0.7), 0 0 9px rgba(255,104,34,0.7), -3px -3px 1px rgba(44,255,62,0.7);
}In this example, we added 2 other shadows of different values to the shadow defined previously.
It is very useful to use a CSS generator like MakingCSS to visualize in real time the effect created by varying the options.
Browser compatibility :
text-shadow
