CSS Shadows and Text Effects

CSS provide properties namely text-shadow and box-shadow to add shadow to text and to elements respectively.

Both have been introduced in CSS3.

The default value of the properties is none that means no shadow.

CSS Text Shadow

As the name suggests, the text-shadow CSS property adds shadows to text. This property is animatable and inherited. The supporting browsers are Chrome 4.0, IE 10.0, Firefox 3.5, Safari 4.0 and Opera 9.6

Syntax

text-shadow: h-shadow v-shadow blur-radius color-shadow

1	text-shadow: h-shadow v-shadow blur-radius color-shadow

where h-shadow is the position of the horizontal shadow, v-shadow is the position of the vertical shadow, color-shadow can have values color name/code, none(No shadow), initial(set a CSS property to its default value), inherit (inherits from its parent element).
Text Shadow example is as below

<style>
    #demotext {
        text-shadow: 3px -2px 1px #CE4DA9;
        font-size: 50px;
    }
</style>



<div id="demotext">Text Shadow</div>

<style>

#demotext {

text-shadow: 3px -2px 1px #CE4DA9;

font-size: 50px;

}

</style>

<div id="demotext">Text Shadow</div>

The default value for blur-radius is 0 and color-shadow will be the same as the text color.

CSS Box Shadow

This property adds shadows to different <div> elements. This property is animatable and can’t be inherited.

The supporting browsers are Chrome 10.0, IE 9.0, Firefox 4.0, Safari 5.1 and Opera 10.5

Syntax

box-shadow: h-shadow v-shadow blur-radius spread-radius color-shadow

1	box-shadow: h-shadow v-shadow blur-radius spread-radius color-shadow

where h-shadow is the position of the horizontal shadow, v-shadow is the position of the vertical shadow, color-shadow can have values color name/code, inset(inner shadow), initial(set a CSS property to its default value), inherit (inherits from its parent element) and spread-radius is the size of the shadow.

Box Shadow example is as below

<head>
      <style>
         #demo {
         background-color: #4A3AA4;
         color:white; 
         -webkit-box-shadow: 19px 18px 2px -7px #0B141C; 
         box-shadow: 19px 18px 2px -7px #0B141C;
         width:50%;
         height:100px;
         }
      </style>
   </head>
   <body>
      <div id="demo">Box Shadow</div>
   </body>

<head>

<style>

#demo {

background-color: #4A3AA4;

color:white;

-webkit-box-shadow: 19px 18px 2px -7px #0B141C;

box-shadow: 19px 18px 2px -7px #0B141C;

width:50%;

height:100px;

}

</style>

</head>

<body>

<div id="demo">Box Shadow</div>

</body>

The default value for blur-radius and spread-radius is 0. The default color-shadow will be the same as the text color.

With the increase in blur-radius, the shadow will become more blurred.

The positive increase in spread-radius increases the size of the shadow and negative increase will decrease the size of the shadow.

The positive values of h-shadow and v-shadow make the shadow on the right and below the text respectively whereas the negative values represent left and above.

For multiple-shadows, a comma-separated list of shadows can be added to the text/element. In this case, the shadows are applied from front to back.