Cross-browser CSS3 box-shadow

Cross-browser CSS3 box-shadow

There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The essence of the solution is very similar to cross-browser border-radius, it also uses VML and behaviour.

box-shadow for modern browsers (except IE8)

You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  box-shadow: 10px 10px 10px #000; /* CSS3 */

If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:

.box-shadow {
  box-shadow: 10px 10px 10px #000; /* CSS3 */

box-shadow for Internet Explorer

Download the file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make box-shadow:

.box-shadow {
  behavior: url(;

It’s reasonable to connect this CSS through conditional comments.

Cross-browser box-shadow demo

In the following example you can see the demonstration of both CSS3 styles – border-radius and box-shadow:

Turn your attention on few limitations while using these solutions for IE.

Cоmmеnts (46):
  1. 1

    thank you very much. For this excellent post.

  2. 2
    Yehuda said:

    Is there a similar .htc file to allow the use of text-shadow in IE?

  3. 3
    José Alejandro Realza said:

    is possible make this effect also if include a jQuery Shadow Plugin

  4. 4
    Dev Chauhan said:

    cheers !!

  5. 5
    Dev Chauhan said:

    I used this coding

    width:35%; float:left; margin-top:20px;

    background-color:#FFFFCC; /* Needed for IEs */

    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)”;


    for my website but in Internet explorer shows like a spot help me out

  6. 6

    when i use and box-shadow, the site rendred very slow.
    menu of my site has java script effects and my menu not work correctly.
    menus move very slowly.
    please help

  7. 7

    -webkit-box-shadow: -1px 13px 25px #DEDEDE;


    • 8

      did you just put in that one line, or did you also do box-shadow. although -webkit- should work for chrome, as that is the point in it, it is no longer necessary as both chrome and safari now work with the proper CSS3 box-shadow.

Соmmеnt раgеs: « 1 2
Lеаvе а Соmmеnt

© 2009–2022  •  Privacy Policy