Show Box Shadow in CSS

This can be used in casting shadows off block-level elements like divs, tables etc. (still not supported in IE7 and IE8). Parameters (from left to right): horizontal offset of the shadow, vertical offset of the shadow, blur radius (optional), spread radius (optional), color.

[View All Snippets]
Show Plain Text »
  1. <style type="text/css">
  2. .shadow {
  3.     -moz-box-shadow: 4px 5px 5px 1px #777;
  4.     -webkit-box-shadow: 4px 5px 5px 1px #777;
  5.     box-shadow: 4px 5px 5px 1px #777;
  6. }
  7.  
  8. .shadowIE {
  9.     background-color:#f5f5f5; /* need for IE*/
  10.     -moz-box-shadow: 4px 5px 5px 1px #777;
  11.     -webkit-box-shadow: 4px 5px 5px 1px #777;
  12.     box-shadow: 4px 5px 5px 1px #777;
  13.     filter: progid:DXImageTransform.Microsoft.Blur
  14.     (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  15.     -ms-filter: "progid:DXImageTransform.Microsoft.Blur
  16.     (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  17.     zoom: 1;
  18. }
  19. .shadowIE .content {
  20.     position:relative;
  21.     background-color:#f5f5f5;
  22. }
  23. </style>
  24.  
  25. <div class="shadow">
  26.     This is a Box-shadowed element.
  27. </div>
  28.  
  29. <div class="shadowIE">
  30.     <div class="content">
  31.         This is a Box-shadowed element.
  32.     </div>
  33. </div>


Result for FF and Chrome:

This is a Box-shadowed element.


Trick for IE:

This is a Box-shadowed element.
Create Your Free Account
Please remember that this information is essential to use our services correctly.
After creating the account you will be able to download all of our FREE products.
Fields marked with * are mandatory






Please send me information about updates, new products, specials and discounts from ApPHP!
We recommend that your password should be at least 6 characters long and should be different from your username/email. Please use only letters of the English alphabet to enter your name.

Your e-mail address must be valid. We use e-mail for communication purposes (order notifications, etc). Therefore, it is essential to provide a valid e-mail address to be able to use our services correctly.

All your private data is confidential. We will never sell, exchange or market it in any way. Please refer to Privacy Policy.

By clicking "Create Account", you are indicating that you have read and agree to the ApPHP Terms & Conditions.

Quick Registration with: Facebook / Google