YPSA Webmaster's Blog

Skip to content Skip to sidebar

How to create CSS3 drop shadow around div elements

CSS BOX Example

Creating drop shadows on elements is always done with images, but it is possible to create drop shadows on elements using CSS.

The css box-shadow property allows designers to easily implement drop shadow effect on box elements.

I am going to show some examples how to write code in css to create drop shadow with box-shadow property.

Syntax

box-shadow: horizontal-shadow vertical-shadow blur spread color

<style type="text/css">
/* Drop shadow on all sides */
.box-shadow{
	box-shadow: 0 0 15px #333; /* all latest browser */
   -moz-box-shadow: 0 0 15px #333; /* Firefox older version*/
   -webkit-box-shadow: 0 0 10px #333; /* Chrome/Safari older version */
}

/* Drop shadow on bottom */
.box-shadow-one-side{
	box-shadow: 0 10px 10px -6px #333; /* all latest browser */
   -moz-box-shadow: 0 10px 10px -6px #333; /* Firefox older version*/
   -webkit-box-shadow: 0 10px 10px -6px #333; /* Chrome/Safari older version */
}

/* Drop shadow on bottom and right side */
.box-shadow-two-side{
	box-shadow: 6px 6px 10px #333; /* all latest browser */
   -moz-box-shadow: 6px 6px 10px #333 inset; /* Firefox older version*/
   -webkit-box-shadow: 6px 6px 10px #333 inset; /* Chrome/Safari older version */
}
</style>

Chart shows multiple browsers support box-shadow property (Green color).

Chart shows which browser supports css box-shadow

Do you like this tutorial? Feel free to leave your comment in the comments section or share with your friends via social network.

About the author

Abdullah Al Shakir

I am a web developer and graphics designer have been working in YPSA as webmaster since 2006. I am expert in XHTML, CSS, JavaScript and PHP programming. I am Wordpress theme and plugin developer. I am a father and husband living in Bangladesh.

Leave a Reply