How to Create Shadow Effects on Text with CSS

As on other elements or objects, so on Text, we can create Shadow Effects. Shadow effect makes Elements as well as Text colorful, focused, highlighted and lively. So, it is essential for every developer to have a clear understanding on how to create shadow effects on text to design required texts impressively.

The CSS property we use for this purpose is text-shadow. We can use this property with any text-related html element like h, div, or p. Now let’s explore into the matter.

Tricks to put Shadow Effects on Texts with CSS

Now put the text within a p element as shown below:

<p>TEXT SHADOW EFFECTS TRIAL</p>

Now style the p with font-size, color, text-align and font-weight property.

<p style="font-size:40px; 
color: darkgreen; 
text-align:center;
font-weight:bolder;">
TEXT SHADOW EFFECTS TRIAL
</p>

Let’s see output:

TEXT SHADOW EFFECTS TRIAL

Now it is time we put value of text-shadow property.

Values of text-shadow property

Firstly we can put three values with text-shadow as shown below:

text-shadow: 3px 4px gold;

Here, first two values are length and the third one is color. The first length value will stretch color to right creating horizontal shadow and second length value will stretch the color to bottom creating vertical shadow.

Secondly, we can put four values as shown below:

text-shadow: 3px 4px 4px gold;

Here the third length value will blur the color.

Now let’s add three-value text-shadow property with our previous code and see the effects:

CODE

<p style="font-size:40px; 
color: darkgreen; 
text-align:center;
font-weight:bolder;
text-shadow: 3px 4px gold;">
TEXT SHADOW EFFECTS TRIAL
</p>

OUTPUT

TEXT SHADOW EFFECTS TRIAL

We see the gold-colored effects with our darkgreen Texts. Now let’s try with four-value property:

CODE

<p style="font-size:40px; 
color: darkgreen; 
text-align:center;
font-weight:bolder;
text-shadow: 5px 5px 5px gold;">
TEXT SHADOW EFFECTS TRIAL
</p>

OUTPUT

TEXT SHADOW EFFECTS TRIAL

Wow! Charming!

Now try again as your own with own color and property-values.

Hope you captured all the gist enjoyably.