Text Shadow generator

The text-shadow property adds a shadow effect to a text. It is a comma-separated list of shadows. For each of the 3 proposed shadows, you can select 3 lengths, and an optional color. Use the tabs to set multiples shadows. Use the Font tab to cutomize the text and the font.

ie: https://fonts.googleapis.com/css?family=Germania+One
ie: 'Germania One', cursive

Here you can customize the appearance of the result area.


CSS Code to copy

Browser compatibility

To go further

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.

Leave a suggestion