CSS snippet to create a shadow of some block element (eg. div tag). It can attache one or more drop-shadows to the box.

Code Snippet

.drop-shadow-box
{
   box-shadow: 4px 4px 4px #bbb;
   -moz-box-shadow: 4px 4px 4px #bbb;
   -webkit-box-shadow: 4px 4px 4px #bbb;
}

.inner-shadow-box
{
   box-shadow: 0px 0px 4px #bbb inset ;
   -moz-box-shadow: 0px 0px 4px #bbb inset ;
   -webkit-box-shadow: 0px 0px 4px #bbb inset;
}

Sample Usage

<div class='drop-shadow-box'></div>
<div class='inner-shadow-box'></div>

Note

Syntax : box-shadow: h-shadow v-shadow blur spread color inset;

  1. Horizontal Offset (positive value to move right, negative to move left)
  2. Vertical offset of the shadow (positive value to move up, negative to move down)
  3. Blur (0 mean sharp, increase the value to be more blur)
  4. Spread (size of shadow)
  5. Color (color of the shadow)
  6. Inset (Just for inner shadow)
Supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.




author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

COMMENTS
blog comments powered by Disqus