CSS Shadow Effect:

CSS has made our life easier with what it has brought for us in the shape of shadow effects. We can add text shadow to with CSS in the following manner:

<p.class= “shadoweffect”> This text shall have black colour and shadow</p>

.shadoweffect{text-shadow:2px 2px;}

Result of above code:

In order to make the shadow drop down, we need to add yet another value, the third one for this:

.shadoweffect{text-shadow:2px 2px 4px;}

Result of above code:

Now let us try and change the colour of our text and its shadow:

.shadoweffect{text-shadow:1px 1px 4px blue;}

Result of above code:

Different Glow Colour and Text Colour:

Let us now try to have a differnt text and glow colour in our glowing text. What we need to define is the colour of our text as well as the colour of glow. See the code below:

shadoweffect{color: red; text-shadow:1px 1px 4px green;}

Result of above code:

Isn’t this nice? All this is done with pure CSS alone and no Javascript or anything of the sort.