CSS drop shadow Examples

Drop shadow css styling allows you to creates a drop shadow effect without using any images

This will works in Firefox 3.5+ , Chrome 5+, IE 9+ , Opera 10.5+ and Safary 5+ browsers.

Here we are going to see Drop shadow Effects Examples

1.How to create basic drop shadow Box

 .drop-shadow-example1
      {
        -webkit-box-shadow:0 1px 10px #666;
        -moz-box-shadow:0 1px 10px #666;
         box-shadow:0 1px 10px #666;
      }

Basic Drop Shadow Example

2.Create drop shadow Box with inset css property

 .drop-shadow-example2
      {
        -webkit-box-shadow:0 1px 10px #666 inset;
        -moz-box-shadow:0 1px 10px #666 inset;
         box-shadow:0 1px 10px #666 inset;
     }

CSS Inset Shadow Example

Drop Shadow with inset css property – This “inset” make the shadow inner side of the box

3.Create double color border using drop shadow method

  .drop-shadow-border
     {
        border:4px solid #438ead;
        -webkit-box-shadow:0 0 0 2px #554b1c inset;
        -moz-box-shadow:0 0 0 2px #554b1c inset;
        box-shadow:0 0 0 2px #554b1c inset;
        }

CSS double color border Example

CSS double color border Example – This “inset” make the in-side border for the box

4.css image shadow and image drop shadow

 .image-shadow
      {
         padding:0.5em;  margin:2em 10px 0em; background:#fff;
        -webkit-box-shadow:0 1px 10px #666;
        -moz-box-shadow:0 1px 10px #666;
         box-shadow:0 1px 10px #666;
      }

 .image-drop-shadow
      {
        -webkit-box-shadow:0 5px 10px #666;
        -moz-box-shadow:0 5px 10px #666;
         box-shadow:0 5px 10px #666;
      }