Know more about these products

Text Shadow generator

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.



CSS Code to copy

Text-shadow explained

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 :







Leave a suggestion