CSS Shadow

The CSS3 gives us an ability to add drop shadow effects to the elements like we do in Photoshop without using any images.

Prior to CSS3, sliced images are used for creating the shadows around the elements that was quite annoying.


Box shadow

This property is used to add shadow to the element’s boxes. We can even apply more than one shadow effects using a comma-separated list of shadows.

The basic syntax of creating a box shadow can be given with:

box-shadow: offset-x offset-y blur-radius color;    
  • offset-x — Sets the horizontal offset of the shadow.
  • offset-y — Sets the vertical offset of the shadow.
  • blur-radius — Sets the blur radius. The larger the value, the bigger the blur and more the shadow’s edge will be blurred. Negative values are not allowed.
  • color — Sets the color of the shadow. If the color value is omitted or not specified, it takes the value of the color property.
Input:-

Index.html
	
<body>   
    <div id="box"></div> 
</body>
Style.css
#box {  
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

Output:-


Text shadow

We can also highlight a text using shadow as we are doing it to a box in above example. This property is used to apply the shadow effects on text.

Input:-

Index.html
	
<body>   
    <div id="box">
		This is a box panel
	  </div> 
</body>
Style.css
#box {  
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

Output:-