Text-shadow

The text-shadow CSS property allows to add shadows to the text.

CSS Syntax

text-shadow: h-shadow  v-shadow  blur-radius  color | none | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>
           .shadow{   	
               text-shadow: 3px 1px 1px #6600CC;  
           }
       </style>
   </head>
   <body>

       <p>Some paragraph for example.</p>
       
       <p class="shadow">Some paragraph for example with text-shadow property.</p>

   </body>
</html>

Property Values

Value Descriptions
h-shadow The horizontal offset of the shadow. If positive the shadow is drawn on the right side of the text, if negative it is drawn on the left side.
v-shadow The vertical offset of the shadow (y-axis). If positive the shadow is below the text, if negative it is drawn above.
blur-radius The blur radius defines how big and how much blurred the shadow is. We can't use negative values. Default value is 0.
color This value allows us to choose color of the shadow.
none This is default value, which means that it has no any shadow.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.