CSS Box Shadow

Used in casting shadows off block-level elements (like divs).

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
  1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  3. The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  4. The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  5. Color

Example

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

Example

Internet Explorer Box Shadow

You need extra elements...

<div class="shadow1">
	<div class="content">
		Box-shadowed element
	</div>
</div>
.shadow1 {
	margin: 40px;
	background-color: rgb(68,68,68); /* 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)";
	zoom: 1;
}
.shadow1 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 100px;
	background-color: #DDD;
}

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}

Related

Comments

  1. User Avatar
    Dor
    Permalink to comment#

    Very cool, but if you could add examples of how it looks (either auto generated or a page with it) could be awesome.

    Also, clipboard function for us Windows users would be very much appreciated :D

  2. User Avatar
    vlado
    Permalink to comment#

    yeah – you can also add a css rounded corners to that – it will bring much more pleasant look

  3. User Avatar
    Ian M
    Permalink to comment#

    Any way to make this work in IE7 or 8?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Nope. IE 9 will be supporting box-shadow though, so fear not!

    • User Avatar
      Derrick
      Permalink to comment#

      Tried it in IE9 Beta and it fell on its face.

    • User Avatar
      Dantz
      Permalink to comment#

      Just found this somewhere (I forgot…)

      filter:progid:DXImageTransform.Microsoft.dropShadow(color=#ccc, offX=5, offY=5, positive=true);

      not so good tho… but help a lil bit :)

    • User Avatar
      Kaden F
      Permalink to comment#

      Thanks to the Chrome Frame from Google it’s now possible to enjoy this in IE 6, 7 and 8.
      http://code.google.com/chrome/chromeframe/

      I love it and use it on all my projects.

    • User Avatar
      monk
      Permalink to comment#

      check out css3pie.com

    • User Avatar
      Faisal Islam
      Permalink to comment#

      IE 6 to IE-8 not works.

    • User Avatar
      Neil
      Permalink to comment#

      A while back I found a neat workaround for box-shadow using a variety of visual filters by [User Agent Man](http://www.useragentman.com/). You might be able to apply the inset style using this method…not sure though, worth looking into.

      [How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript.](http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/)

    • User Avatar
      Paul Piper
      Permalink to comment#

      Drop-shadow Generator

      I created a drop-shadow generator that actually works with IE7 & 8

    • User Avatar
      cynthia
      Permalink to comment#

      Hi, Can you please tell me how to resize the width of boxshadow as per text size automatically ? Thanks.

    • User Avatar
      Guest
      Permalink to comment#

      Here is how to make it work in all browsers including IE, Chrome, FireFox, Safari and more!
      Here is How:
      You need to add the browser prefixes that looks like this: -ms-box-sha...
      Here’s an Example:
      HTML5

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8" />
          <title>Box Shadow Example</title>
          <link rel="stylesheet" type="text/css" href="where/your/css/file/is.css" />
      </head>
      <body>
      
      <div class="box"></div>
      
      </body>
      </html>
      

      CSS

      .box {
          width: 100px;
          height: 100px; 
          margin: 15px 0;
          background: #ccc;
      
          /* Box Shadow */
          /* Opera */
          -o-box-shadow: 5px 5px 5px #666;
          /* IE */
          -ms-box-shadow: 5px 5px 5px #666;
          /* Mozilla FireFox */
          -moz-box-shadow: 5px 5px 5px #666;
          /* Google Chrome */
          -webkit-box-shadow: 5px 5px 5px #666;
          /* Normal */
          box-shadow: 5px 5px 5px #666;
      }
      
  4. User Avatar
    Adam
    Permalink to comment#

    I think you’ve got an extra zero in your inset code there–your reference url writes it thusly:

    box-shadow:inset 0 0 10px #000000

    whereas you have

    box-shadow:inset 0 0 10px 0 #000000
  5. User Avatar
    Dragonwolf
    Permalink to comment#

    While -webkit-box-shadow should, in theory, work the same way that -moz-box-shadow does in Firefox, I’ve found that it’s not necessarily the case in practice, especially when using RGBA values for your color. I’ve found that I’ve had to put the RGBA value first for Safari to pick it up (ironically, Chrome doesn’t seem to care).

    It seems, too, that the Webkit engine itself doesn’t support the Inset value yet, either (neither Chrome nor Safari display it). Hopefully, that will change, soon (from what I’ve been able to find, they’re still working the bugs out of the box-shadow support).

  6. User Avatar
    mkellenberger
    Permalink to comment#

    looks very nice!
    thx for sharing with us. just waiting for a workaround for IE 7/8 without any images!

    • User Avatar
      Syamsul Alam
      Permalink to comment#

      Agree, the inner shadow css looks very good on my home page for my opt in box.

      Loving this site!

  7. User Avatar
    dikki
    Permalink to comment#

    Just found one: http://www.netzgesta.de/tripleb/

    Works great for static content, even with boxes.

    However, it relies on the name of a class. It parses this name through a js file and render the block. I need it for a mouseover event though, and it doesn’t parse it again after this event.

  8. User Avatar
    Saifu
    Permalink to comment#

    not working in ie…..

    • User Avatar
      Starr
      Permalink to comment#

      IE doesn’t support ANY CSS3, not until IE9 comes out.

      Any webby person out there would know this.

  9. User Avatar
    Jose Gonzalez
    Permalink to comment#

    Just curious. How do you make the shadow equally go around the box. As opposed to just off to the right?

    • User Avatar
      Starr
      Permalink to comment#

      set the horizontl and vertical offsets to 0px…

      .shadow {
        box-shadow: 0px 0px 5px #ccc;
        -moz-box-shadow: 0px 0px 5px #ccc;
        -webkit-box-shadow: 0px 0px 5px #ccc;
      }
    • User Avatar
      Mikkel
      Permalink to comment#

      Any way to select which sides to get the shadow (remove the bottom), but still having the shadow centered?
      I’m trying to apply it to tabs on my nav, and it look pretty weird when the shadow appears below the tab (which is supposed to look like part of the page below it)

    • User Avatar
      Chris Cox
      Permalink to comment#

      Mikkel: (sorry, hit the limit for nesting comments) Off the top of my head, what about absolute positioning and z-index to keep the bottom shadow lower than the page?

    • User Avatar
      Ryan
      Permalink to comment#

      Perhaps try a negative vertical offset?

    • User Avatar
      Brad
      Permalink to comment#

      Mikkel, you might also try adding multiple shadows with the same color so that the top and both sides are shadowed but the bottom is not. Like this:

      .shadow{box-shadow:5px -5px 5px #ccc, -5px -5px 5px #ccc;}

      Of course, you can get more sophisticated with multiple shadows to achieve just the effect your after, but this gives you the idea.

    • User Avatar
      Tom
      Permalink to comment#

      @Mikkel: Offset your inner-shadow in one direction, and then add a negative spread equal to or greater than your offset in order to make the shadow bigger than your box. Example for FireFox:

      .shadow {
      -moz-box-shadow: 5px 0px 5px -5px #000 inset;
      }

  10. User Avatar
    dimas

    Any workaround for webkit?

  11. User Avatar
    Luke

    Inset does not work bro!?

  12. User Avatar
    Blognya Achot

    thanks for sharing it with us, an interesting article and I have tried it and the results are amazing ..

  13. User Avatar
    blinkdt

    Until this works in IE, who cares? Amazingly heady stuff to view the world through an Apple optic, but be careful of the ledge . . . . And, yeah, Win7 and Office 2010 are out and CSS3/9 will be here soon. Thank you, Microsoft.

    • User Avatar
      Duncan

      Maybe we shouldn’t get too excited about IE 9, or thank Microsoft too soon.
      Could be they have just created another hoop for us to jump through. IE 9 requires Vista as minimum, 64% of the user base for Windows is reported to be still running XP.
      Can we really expect people to possibly replace their entire system simply to get IE 9.
      The biggest hold up with Microsoft is that the browser is bundled so tightly to the Operating System, whereas all the other major browsers are less platform dependant and more easily upgraded to meet newer features.
      We’ve cursed IE 6 for a long time now, sadly we might be heading for a similar scenario with IE 7 and even IE 8.

    • User Avatar
      Erik
      Permalink to comment#

      That statistic is false. Ie9 looks and functions (from what I’ve tested, great). Being that it is, as you say, platform dependent it will forever leverage hardware acceleration far better than anything else provides. It’s not a downside at all.

      On another note… If most of you have been following ie9 you’ll notice that it does not have the CSS 3 hype everyone is anticipating.

      No shadow, no gradient, no transitions, no cool designer tricks…

    • User Avatar
      richphitzwell
      Permalink to comment#

      IE as a whole is below 50% marketshare now. If we remove the lagers such as ie6 that are pretty much there just to support legacy programs and take away ie7 which again is pretty much just there to support legacy programs and some lagers, then the actual market share of users on ie is around 36%. Not sure if we really need to hang onto the must wait for ie bandwagon anymore especially with something that degrades gracefully in all versions of IE. Even my statistics for all my US based websites show IE falling off.

      When we include the incredible growing marketshare of smartphone based browsers except win7phone the dominance of non css3 or html5 browsers (IE) drops even further.

      I can respect creating two stylesheets though, one for IE and one for all the others, but at the same time, my current thoughts are that ie is no longer the absolute dominant browser and that I dont have to design around it anymore. Just my 2c

    • User Avatar
      Kcshaeffer
      Permalink to comment#

      @richphitzwell – I totally agree with you! I no longer design for IE either. And I don’t believe I’m seeing through an Apple optic. Safari is not the only browser out there that isn’t IE. :)

  14. User Avatar
    kirankumar
    Permalink to comment#

    not working in IE7

  15. User Avatar
    ken the tech
    Permalink to comment#

    not working in IE8 either :(

  16. User Avatar
    Jeffrey

    Hate to be a nag, but to future proof it the box-shadow property should appear last so when CSS3 is the accepted standard it will be used.

    • User Avatar
      Ryan
      Permalink to comment#

      I was just thinking the same thing.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I’m not sure it matters…

      As long as all of them are the same, the browser will either support it or not. If the vendor extension overrides the original, who cares? It’s the same rounded corner. Then if that browser later stops supporting the extension, the it also doesn’t matter because it’ll use the native property and ignore the extension.

  17. User Avatar
    Ramm
    Permalink to comment#

    I’ve been using CSS3 Pie to get the same effect in IE, without braking anything else, it’s been working fine for me. css3pie.com

    • User Avatar
      Joe
      Permalink to comment#

      This is *the* solution for IE.

    • User Avatar
      Luis
      Permalink to comment#

      I just checked the CSS3Pie site and they explicitly say that the inset keyword is not supported. Can you provide an example of it working in IE<9?

  18. User Avatar
    Ricardo Verhaeg
    Permalink to comment#

    When I add the box-shadow property on a fieldset with legend, on firefox the display of the shadow takes the width of the fieldset + legend, but on Chrome or Opera it shows without the legend (as I expected)
    Is there any workaround this?

  19. User Avatar
    Victor Augusto
    Permalink to comment#

    Thaks, man.I was looking for this tutorial.

  20. User Avatar
    Big Online Tips
    Permalink to comment#

    It does work in IE. Gmail does not use PNG images for shadows of its chad box setting popup but shadows do appear same in IE and Firefox.

    What to do?

  21. User Avatar
    Aparna Chakraborty
    Permalink to comment#

    It is not working in IE 7 and 8.

  22. User Avatar
    Chris Enloe
    Permalink to comment#

    Is there any way that I can achieve the same affect when a user just hovers over a box?

    • User Avatar
      diglin
      Permalink to comment#

      Why not just use a pseudo class

      .shadow:hover {
        -moz-box-shadow: 0px 0px 5px #ccc;
        -webkit-box-shadow: 0px 0px 5px #ccc;
        box-shadow: 0px 0px 5px #ccc;
      }

      It depends on which html tag use it this pseudo element but it should work. I use it for rollover input button (I don’t use the shadow effect but a color change effect)

  23. User Avatar
    Sahus Pilwal
    Permalink to comment#

    Ah inset is what achieves the inner shadow. I was trying to use negative pixel values wondering if that might work. Thanks Chris your a life saver…;);)

  24. User Avatar
    Sahus Pilwal
    Permalink to comment#

    If using the CSS box shadow on a global scale and for whatever reason you need to lose the effect on one particular sub class just use:

    .class {
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    }

  25. User Avatar
    sriram
    Permalink to comment#

    Using this below code you can achieve the CSS shadow in IE Browser.

    Shadow for two sides(right and bottom)

    .shadow-ie {
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
    }
    Shadow for all side in IE Browser

    .shadow-ie {
    filter: progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=45, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=135, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=225, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=315, Strength=3);
    }

    Depends upon your page background choose your shadow color.

  26. User Avatar
    Damir
    Permalink to comment#

    Is there a way to make an inset shadow only for one side of box?
    Have in mind that should work with textured backgrounds too.

    • User Avatar
      oscar
      Permalink to comment#

      have you found an answer to this question by any chance?

    • User Avatar
      Periback
      Permalink to comment#

      i’d like to know the same thing, Damir.. Did you find out something?

    • User Avatar
      Will D White
      Permalink to comment#

      Looking for an answer to this too.

    • User Avatar
      Pichirho
      Permalink to comment#

      You can expand the shadow with a negative value to hide the other sides. This code creates a 5px black inset shadow on the left side of the box only:

      box-shadow: inset 5px 0 5px -5px #000;

      Just repeat the needed shadow width in the values to get the effect. You can use multiple shadows to get inset shadows e.g. for top and bottom only. This code would create a 10px red inset shadow in top and bottom:

      box-shadow: inset 0 10px 10px -10px #f00,
      inset 0 -10px 10px -10px #f00;
    • User Avatar
      infous
      Permalink to comment#

      Try overflow hidden solution to one side shadow or one side without a shadow:
      http://starikovs.com/2011/11/09/css3-one-side-shadow/

  27. User Avatar
    Yuval
    Permalink to comment#

    question: does all browsers that suppors one of the shadow csss also supports rgba notation?
    I saw Google Image use box-shadow with the color part as rgba(0,0,0,0.65) – to add a nice transparency effect to the shadow – and I wanna do it tot – but – do I need to supply a ‘fallback color’ or is it safe to assume that if the browser is “good enough” to support shadow – it will also surely support rgba?
    Thanks.

  28. User Avatar
    Professor WordPress
    Permalink to comment#

    I tried it out on http://leadtheme.com but it didn’t didn’t quite look how I wanted. Maybe I will try that transparency thing. For now I just had to use a png :( . Thanks for the the code though… I have used it on modals and stuff and it works cool if you use the right colors :)

  29. User Avatar
    Cameron Spear
    Permalink to comment#

    I was really excited when I saw there was a download for a TextMate snippet, but it doesn’t work. It says it’s corrupted (and it seems to say that because the content of the snippet is the snippet in question, but with full HTML markup as it appears on this page).

  30. User Avatar
    vipil
    Permalink to comment#

    Helpful. but what about IE ?

  31. User Avatar
    costicanu
    Permalink to comment#

    Your inset shadow example not working in Safari. After your code, example is empty! Check it, is the last example in this article.
    -webkit-box-shadow:inset 0 0 10px #000000;

  32. User Avatar
    Ruann
    Permalink to comment#

    Just add below to give your border more roundness:

    -moz-border-radius: 15px 15px 15px 15px;

    Hope it’s helpful to someone.

  33. User Avatar
    Big Squid SEO
    Permalink to comment#

    This is great, but will IE ever get with it? Seems like there’s always some sort of drastic work around. So annoying!

  34. User Avatar
    Myk
    Permalink to comment#

    is there any way to get it working on images?

    • User Avatar
      Mac
      Permalink to comment#

      Myk: Just place a DIV in front of the image you want the inset shadow on, absolutely position it with z-index, and you’ll get a nice cutout effect with shadowing. I just did it for a google map where I wanted that cutout effect.

    • User Avatar
      Myk
      Permalink to comment#

      Thanks Mac! That one works for inner shadow on images.. :)

  35. User Avatar
    Mohamed
    Permalink to comment#

    Very helpful, I went to my code directly to perform changes!

  36. User Avatar
    time
    Permalink to comment#

    it works on all browser except the main one :) IE

    • User Avatar
      Ellisgeek
      Permalink to comment#

      Good news IE has less that 50 percent of the browser market it is no longer the main one :D

  37. User Avatar
    Làm Web
    Permalink to comment#

    Thank you very much, this is great!

  38. User Avatar
    Artem
    Permalink to comment#

    Thank you very much, could you just help me out to put the shadow on the right side, of the bottom part of the header? I can place it either on the right or on the left… but not both…

  39. User Avatar
    sk8erbryan
    Permalink to comment#

    A lot of comments and people are concerned about the lack of ie support. Web pages DON’T need to look exactly the same in every browser. I know that may come as a shock but as devices, versions and variations expand it’s time to get out of the idea that webpages are static as print layout.

    So bottom line is if you want the shadow to show up the same in each version of IE cut the images, dust up your padding, margins, background-images, position:absolutes and z-indexes. There’s no easy way around it, otherwise use css3, modern browsers will get a modern experience and everyone else won’t know what they are missing.

  40. User Avatar
    Hadley
    Permalink to comment#

    This looks great! How can I make it on both the left and right side of a box, but not the top and bottom? I’m trying to get one white box from top to bottom of the page, with shadowing on either side. Is it possible?

  41. User Avatar
    Discover
    Permalink to comment#

    Nice post, Thanks to sharing., Css shadow effect in IE with example here http://discoverweb.info/css-shadow-for-ie.html

  42. User Avatar
    Josh

    This doesn’t work.

    It’s amazing that even IE8 still sucks.

  43. User Avatar
    Mark Howells-Mead

    Re. support for IE: I find it more amazing that there are still devs around who look for and find pages like this, yet don’t bother reading the comments.

    • User Avatar
      Josh

      Oh, I know there is support for it in IE. It’s just still not simple, which is amazing.
      Also, shadows in IE still mess up the alignment of cursors in inputs within elements what have been shadowed on more than one side, so it’s still a pain… and slightly buggy.
      Just seems very behind.

    • User Avatar
      Arno
      Permalink to comment#

      has anyone found a way to fix the cursor alignment issue for IE 6-8 when using box shadow via filters? I’d really appreciate a solution (or a hack) as it would be a pain to recreate this using images.

  44. User Avatar
    Randy

    Is there any way to use a div with an inset shadow to ‘wrap’ around nested divs? AND keep the shadow translucent on top on the nested divs?

    Like this?
    http://www.integralhealth.ca/aboutUs/index.php

    That site uses JPGs with the shadow already incorporated into the images. Any way to do it using CSS only for the inline shadows?

    In my own noob way I tried the following code. Of course it didn’t work.

    #container	{
    	position: relative;
    	width: 800px;
    	height: 1000px;
    	margin: 30px auto;
    	background-color: lightgrey;
    	-moz-box-shadow:inset 0 0 20px #000000;
       	-webkit-box-shadow:inset 0 0 20px #000000;
       	box-shadow:inset 0 0 20px #000000;
    	z-index: 1;
    }
    
    #headspace	{
    	float: left;
    	position: relative;
    	width: 590px;
    	height: 30px;
    	background-color: lightcoral;
    	z-index: -1;
    }
  45. User Avatar
    Ivan

    man thanks

  46. User Avatar
    kRemtronicz

    I knew about this effect but until today I did not know I could use it for tables! My new site is still under development but it is coming along REALLY well. I’m so glad of all the things we can do with CSS. ;O)

  47. User Avatar
    bob

    box shadow has since been dropped from css3 spec

    • User Avatar
      Andre
      Permalink to comment#

      What do you mean ‘dropped from CSS3 spec’? Could you perhaps provide a link to this news? ‘box-shadow’ was only added in CSS3, surely they wouldn’t drop it so quickly…

    • User Avatar
      Andre
      Permalink to comment#

      If you post comments like that, it’s always best to cite the source of your information.

      After a bit of research, looks like it was dropped around Jan / Feb 2010 (found various blog and article comments about this) and then re-added with the ‘inset’ option sometime in April 2010 (http://ajaxian.com/archives/get-some-box-shadow-going).

  48. User Avatar
    sunny
    Permalink to comment#

    Hey . anyone can help me. ? i want my box with the shadow wrapping around it . not for just two edges .Can css do it ?

    • User Avatar
      Andre
      Permalink to comment#

      Hi Sunny,

      Sounds like you need to use the box-shadow without a X or Y offset, in specifying the box-shadow, the four elements are done as follows:
      box-shadow: ;

      So, try using something like this:
      box-shadow: 0px 0px 5px #666;

      Another option is to use RGBa or HSLa for the colour, such as:
      box-shadow: 0px 0px 5px hsla(0,0%,0%,0.5);

      Obviously for now, remember to duplicate your CSS3 lines with the -webkit and -moz prefixes though…

    • User Avatar
      Andre
      Permalink to comment#

      Eh.. Sorry, some parts of my comment were removed. As seen in Chris’s article, the general format of the box-shadow is:

      box-shadow: (x offset) (y offset) (blur radius) (colour);

    • User Avatar
      Toiletduck
      Permalink to comment#

      Hey Andre, thanks for the info.
      How do I get the same effect in EI? My current code is:

      -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;
      -filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)

      But that’s just for 2 side. Should I set the Direction to 0?

  49. User Avatar
    Ajay
    Permalink to comment#

    what about if i want shadow for whole box… ??
    i tried to change Direction but not… work
    please replay i am waiting

    and i want to tell u i am a big fan of u

  50. User Avatar
    Antoinette
    Permalink to comment#

    So, I was wondering if I could make it so there was no body background color and only the inner shadow. Is this possible at all?

    • User Avatar
      Andre
      Permalink to comment#

      Yes, this is possible.. Just set the background-color to ‘transparent’ and add the word ‘inset’ to the box-shadow. For example:

      body {
      background-color: transparent;
      box-shadow: inset 0px 0px 5px #666;
      }

  51. User Avatar
    Michael Simonson

    For IE 6, 7, 8, 9 You can do this:

    HTML:

    hello

    CSS:

    .wrapper {
    position: relative;
    filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2.0, makeshadow=’true’, ShadowOpacity=.50);
    background-color: #fff;
    }

    .wrapper-inner {
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
    }

    And for FF, Chrome, Safari:

    HTML:

    hello

    CSS:

    .wrapper {
    position: relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 3px #000000;
    -webkit-box-shadow: 0 1px 3px #000000;
    box-shadow: 0 1px 3px #000000;
    }
    .wrapper:after {
    display: block;
    visibility: collapse;
    content: ” “;
    clear: both;
    font-size: 0px;
    }
    .wrapper-inner {
    border: 1px solid #ccc;
    background-color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 3px;
    position: relative;
    }

    Works pretty good, IE 6 need a little tweak, but I thought I would let you’all figure that one out. And, it degrades to just a box with a border. Not to shabby.

  52. User Avatar
    Michael Simonson

    Here is a outer glow thingy too:

    The HTML:

    hello

    The CSS:

    .wrapper {
    	position: relative;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.01);
    	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    
    
    .wrapper:after {
    	display: block;
    	visibility: collapse;
    	content: " ";
    	clear: both;
    	font-size: 0px;
    }
    
    .wrapper-inner {
    	border: 1px solid #cdcdcd;
    	background-color: #fff;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	position: relative;
    
    }
    
    /** This stuff is for IE 8, IE 7 just degrades nicely with only a box with a border **/
    
    * html .wrapper {
    	filter: progid:DXImageTransform.Microsoft.blur(pixelradius=5.0, makeshadow='true', ShadowOpacity=.10);
    	background-color: #fff;
    	left: -5px;
    	top: -5px;
    }	
    * html .wrapper-inner {
    	bottom: -5px;
    	left: 5px;	
    }
  53. User Avatar
    Mooseman
    Permalink to comment#

    Trying to use the inset shadow for a div around a set of scrolling images. But the images appear over the shadow. Any suggestions?

    • User Avatar
      Mooseman
      Permalink to comment#

      I mean without z-index layering; I have links.

    • User Avatar
      WEbCreator.Freelancer
      Permalink to comment#

      use position:absolute in your css file
      n try 2 use z-index possibly showing your links active.. keeping your content intact

    • User Avatar
      Alex
      Permalink to comment#

      Set your image as the Background of a div, and then apply box-shadow to that same div. Shadows will now be over the image. You can also use border-radius as well. Works great.

  54. User Avatar
    ysh
    Permalink to comment#

    does this apply to tables? i mean.. i won’t put in a div.. just in the table.

  55. User Avatar
    johntm
    Permalink to comment#

    I dont want shadow at the bottom.
    what should i do?
    plz tell.

  56. User Avatar
    Discover
    Permalink to comment#

    CSS Drop shadow methods CSS Inset Drop Shadow

  57. User Avatar
    Abdelkader Soudani
    Permalink to comment#

    very interesting post indeed, and yea css3 is so much fun but omg IE is always a huge pain in the ass, even IE9 you have to add some sort of a meta tag so the browser will render the page like whatever
    man, i wish Microsoft didn’t inflict such a disaster as IE into web world!

  58. User Avatar
    So Divine Design
    Permalink to comment#

    Question, I have all of my content in a page wrap that also has a class of group. How do I write the code so that the code will go around my page wrap without wiping it out completely. For example I want the shadow to look how it looks on this page.

  59. User Avatar
    Kevlyn
    Permalink to comment#

    Wow, First of all, the site is really really awesome. Great work.

    Now a days I can see, every site is using font inner shadow, I want to know, how to do it, which can be viewed in IE too.

    Thanks a lot…

  60. User Avatar
    Kasia
    Permalink to comment#

    Great website, now is my favorite:)

    Thank you for the simple and clear description.

    Greetings!

  61. User Avatar
    Alberto
    Permalink to comment#

    Hi dears, I have a problem with the shadow:

    I have the folllowing page:

    
    &ltheader>
    &lt!-- some content -->
    &lt/header>
    &ltdiv id="myID">
    &lt!-- some content -->
    &lt/div>
    

    The header element have a shadow proprety, but, when I apply the background gradient at the div element, it overflow the shadow.

    How to solve it?

    • User Avatar
      Alberto
      Permalink to comment#

      Here the CSS:

      
      header {
      	height: 140px;
      	width: 100%;
      	background: url(/img/css/pattern.png) left top repeat;
      	background-color: #252525;
      	/* Box Shadow */
      	box-shadow: 0 2px 8px rgba(0, 0, 0, .37);
      }
      
      #bread {
      	height: 40px;
      	background: -webkit-gradient(linear, left bottom, left top, from(#0054a6), to(#0072bc));	
      }
      
  62. User Avatar
    Philip Hastings
    Permalink to comment#

    What is all this talk about IE – is that a web browser, or something?

  63. User Avatar
    Itsmeagain
    Permalink to comment#

    Use javascript call modernizr
    takes care of all the browsers’ inconsistency.

  64. User Avatar
    Radhika
    Permalink to comment#

    for ie 8

    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color=’#cccccc’)”;

    for ie 7 and lower browser

    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color=’#cccccc’);

    but not enjoying the shadow effect :(

  65. User Avatar
    Helen Neely
    Permalink to comment#

    It worked nicely on my site. I was looking for something to help spice up the pictures and the shadow effect did the trick.

    Nice call.

  66. User Avatar
    karthimx
    Permalink to comment#

    Very nice shadow effect. Added to my box.

  67. User Avatar
    kapil gupta
    Permalink to comment#

    I have applied padding zero through javascript as given below in IE 9 but padding is not set, its take extra white space below the text. its user control make in javascript and i am using the user control in a website.please help me.

    selectBox.options[newIndex].style.padding=0; // not work in IE9

    Thanks And Regards
    Kapil Gupta
    INDIA

  68. User Avatar
    Kasturi Dutta Mazumder
    Permalink to comment#

    Thanks for IE you can use this below code and you have to put the PIE file in the css folder then it will work fine in IE.
    Below is the link you can check all the browsers hacking code.
    http://webdesigning-tricks.blogspot.com/

    This rounded corner will also work in IE

    .rounded-corners{border: 1px solid #fff;
    padding: 60px 0; margin:20px;
    text-align: center; width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 0px 0px;
    -moz-box-shadow: #666 0px 0px 0px;
    box-shadow: #666 0px 0px 0px;
    background: #333333;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#cccccc));
    background: -webkit-linear-gradient(#333333, #cccccc);
    background: -moz-linear-gradient(#333333, #cccccc);
    background: -ms-linear-gradient(#333333, #cccccc);
    background: -o-linear-gradient(#333333, #cccccc);
    background: linear-gradient(#333333, #cccccc);
    -pie-background: linear-gradient(#333333, #cccccc);
    behavior: url(PIE.htc);}

    Kasturi
    Web Designer

  69. User Avatar
    kapil gupta
    Permalink to comment#

    I give the answer of my question :)

    I am developing the application in ASP.net . my application was in old version so designer.cs file was not there, only resx file was there. now i created file in ASP.net new version which has a designer.cs file( contain definition of controls) and by do so padding is automatically remove in IE 9.

    Thanks And Regards

    kapil gupta

    INDIA

  70. User Avatar
    left2dollars
    Permalink to comment#

    thank you so much for the tutorial chris! i finally know why my box shadow does not work in chrome and safari.
    All i need to do was to add the webkit property since both chrome and safari runs on webkit engine.

  71. User Avatar
    mark
    Permalink to comment#

    Cool css thing but it not working in internet explorer.

  72. User Avatar
    Praveen Gowda I V
    Permalink to comment#

    I want the shadow to appear only on one side(say right only)
    How can we achieve this.

    • User Avatar
      Paul
      Permalink to comment#

      I’d like to know this as well but it certainly looks like you can’t do it with CSS.
      I’m planning to do it using a repeating background image instead.

  73. User Avatar
    Ansar
    Permalink to comment#

    Tnank’s for the article, very useful!

  74. User Avatar
    Dee
    Permalink to comment#

    Hi, this is an awesome site. I’ve learned a lot here. I’ve tried all evening and I can’t figure out why this box-shadow is showing up with extra space around the image on my test site. http://deebroughton.info/

    I tried lots of different shadows, all show the same space around the image. I’ve tried to force the padding and margins to be zero. I’ve checked the image itself and there’s no space. What am I doing wrong?

    I’m using div class with this

    .myshadow {
    padding:0px 0px 0px 0px !important;
    margin:0px 0px 0px 0px !important;
    background-color: transparent;
    box-shadow: inset 0px 0px 5px #666;
    }

  75. User Avatar
    Dale
    Permalink to comment#

    Hi Chris!

    Just a thought….

    Could you put a COPY link in the code block to make it easier to select and copy.

    I’ve been a fan for a while now..thanks for your hard work!

    Dale

  76. User Avatar
    Antony Deepak
    Permalink to comment#

    I still think IE9 does not do a great job. Hear is my CSS code.
    See the difference in FF,Chrome and IE9.

    -moz-box-shadow: 0 12px 145.7px 9.3px rgba(0,0,0,.59);
    -webkit-box-shadow: 0 12px 145.7px 9.3px rgba(0,0,0,.59);
    box-shadow: 0 12px 145.7px 9.3px rgba(0,0,0,.59);

    The total blur radius is different in IE

  77. User Avatar
    Muhammad touseef
    Permalink to comment#

    Many times i see you when i google for some problem. Look at your page man decent and fancy.. and its nice to be on this page from top to bottom. By the way i learned abc of wp theme development from you at lynda.. God bless you.

  78. User Avatar
    heaversm
    Permalink to comment#

    Any way to do an inset box shadow on only 3 sides?

  79. User Avatar
    Ethan Thatcher
    Permalink to comment#

    Can you put that effect in a box, then y=use it as a hover, put some transition, that would be LEGIT!

  80. User Avatar
    Sean Jenkins
    Permalink to comment#

    Hi all great tip. I am looking for a way to have an inset box-shadow but only on the bottom of the element? Any links of ideas? Thanks

    • User Avatar
      Sean Jenkins
      Permalink to comment#

      Sorry, I should have added?

      “With a blur too.”

    • User Avatar
      Sean Jenkins
      Permalink to comment#

      Oops, spoke too soon. Sorry all.

      box-shadow:inset 0 -10px 10px 0 #000000;

  81. User Avatar
    Prabhav
    Permalink to comment#

    How can we add shadows to all the four sides of a div?

    Please reply ASAP. :)

    • User Avatar
      anonymous
      Permalink to comment#

      .shadow {
      -moz-box-shadow:inset 0 0 10px 10px #000000;
      -webkit-box-shadow:inset 0 0 10px 10px #000000;
      box-shadow:inset 0 0 10px 10px #000000;
      }

      so the important thing to get them all even is to leave the first two numbers as “0” and have numbers for the rest.

      try this site http://css3generator.com/ to customize as youd like

      hope this helps

  82. User Avatar
    anonymous
    Permalink to comment#

    ie8 box shadow sucks!!

  83. User Avatar
    Sid
    Permalink to comment#

    How did you design the Heading Box of this website in which written “CSS TRICKS” box and vertical text. Can you please guide

  84. User Avatar
    Anindya
    Permalink to comment#

    great article. thanks. how to make shadow on left,right and bottom of the box but not on top ?

    I mean three sides of the box(left, right, bottom) will be shadowed.

    Please help me…

  85. User Avatar
    rob steele
    Permalink to comment#

    Nice site guys good info

  86. User Avatar
    Borneo Templates
    Permalink to comment#

    Thank you Cris, so inspired me to make themes for blogger platform. It’s really useful for me. Warm Regards, Borneo Templates Admin.

  87. User Avatar
    Zeeshan waheed
    Permalink to comment#

    Oh god it is so easy to create shadow effect and i was trying hard with transparent shadow image. Chris please share the script of animation in which you appear on mouse hover.

  88. User Avatar
    sagar
    Permalink to comment#

    Hi chris,
    Box shadow property did not work in my mobile site
    what to do?

  89. User Avatar
    Josh
    Permalink to comment#

    Thanks for the info. And screw IE.

  90. User Avatar
    Jensen Designz
    Permalink to comment#

    Good Stuff…that’s what im looking for!

  91. User Avatar
    Putri
    Permalink to comment#

    wow its work tq

  92. User Avatar
    Ali
    Permalink to comment#

    Hi Chris, I really liked this tut & learned a lot. But I am having an issue, so I was wondering if you would be able to assist me please. The issue I am having is that I get a solid background color in IE 6, when I apply the shadow in an empty div. I also tried using CSS3Pie, it works fine in Firefox,Chrome & IE, but it just fills the div with a color even though the background color is not been set. I tried setting the background to none, and still it doesn’t work properly. So, if it’s possible please help me how to fix this issue.
    Thanks,
    Ali

  93. User Avatar
    waqas
    Permalink to comment#

    Its working. You are so great . And be like this , and keep helping human.

  94. User Avatar
    Vivek
    Permalink to comment#

    How can i put the shadow at right and left side of a web page…

    • User Avatar
      arpit
      Permalink to comment#

      hi ……. dat was really helpful atleast for me being a beginner

    • User Avatar
      Libin
      Permalink to comment#

      You can put shadow on left and right by the following code.

      
      -webkit-box-shadow: 8px 0 6px -6px black, -8px 0 6px -6px black;
      	   -moz-box-shadow: 8px 0 6px -6px black, -8px 0 6px -6px black;
      	        box-shadow: 8px 0 6px -6px black, -8px 0 6px -6px black;
      
  95. User Avatar
    herbyderby
    Permalink to comment#

    Thanks again for another great tute, Doctor Coyier. If one gracefully degrades the shadows for IE, it’s all good. While we continue to rail against IE, we look to things like this.

  96. User Avatar
    Leigh Ann
    Permalink to comment#

    Hello! Thanks so much for your direction in displaying a box shadow for IE. It works great except I am not able to set the background color because I am using a background image. When I use the filter for IE with the background image it shows the entire container as a shadow… with no background image. Any direction as to how to make this work with these elements? Thanks.

  97. User Avatar
    Joseph Twumasi
    Permalink to comment#

    A quick fix for the project I’m working on, using the last one making the shadow visible at the bottom of my sub menu and also using css3pie script to make it work on ie7,8. Thanks chris. You are the best.

  98. User Avatar
    Purpledogs
    Permalink to comment#

    Thank you.
    And how to set both inner and outer shadow on one element?

    • User Avatar
      James
      Permalink to comment#

      Yes, please, I would also like to know how to make both inner and outer shadow on one element?

  99. User Avatar
    James
    Permalink to comment#

    Re: “…how to set both inner and outer shadow on one element…”

    I found the solution at:

    http://stackoverflow.com/questions/8556604/is-there-a-way-to-use-two-css3-box-shadows-on-one-element

    You can comma-separate shadows:

    box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

  100. User Avatar
    MACC
    Permalink to comment#

    From my experience box shadow properties only work if I set the corresponding div to “position: relative”, is that so? This is very unfortunate because I’m using corner-radius on the same div and Chrome has a bug that makes it ignore the corner-radius property if the corresponding div is set to “position: relative” so it seems that I’ll have to choose between one thing or the other. Sadly this has already been reported at https://bugs.webkit.org/show_bug.cgi?id=72619 but nothing has been done about it still.

  101. User Avatar
    Alex
    Permalink to comment#

    Very nice work! But one more thing: could you please tell us how to make the One-Side Only example work on IE 7+?

  102. User Avatar
    Grego
    Permalink to comment#

    If IE bothers you with shadowing :

    http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
    http://placenamehere.com/article/384/css3boxshadowininternetexplorerblurshadow/

    Ye can get it sorted with conditional html for IE and these wee tricks, and keep any other browsers content with your hackery.

    Don’t lay the blame on me that is a wee bit ugly.

  103. User Avatar
    Sajjad sabri
    Permalink to comment#

    Really helpful …
    Thanks

  104. User Avatar
    David
    Permalink to comment#

    I am creating a wine dinner page and want to use an inline style directly on an image tag. All of the syntax I’ve found discusses external style sheets and I need it to be an inline style so I can past the html in my e-mail marketing tool. However, my image tag already is already using a style. Can I use more than one?

  105. User Avatar
    Pedro Braconnot
    Permalink to comment#

    Ultimate CSS Gradient Generator from ColorZilla Firefox Plugin does a very nice job in giving previews and code generation, Including IE 9 support.

  106. User Avatar
    Chris
    Permalink to comment#

    Good Stuff…that’s what im looking for! thx

  107. User Avatar
    Luis
    Permalink to comment#

    Very, very helpful

    Thanks so much!

  108. User Avatar
    RP
    Permalink to comment#

    very helpful knowledge!
    thank you very much!!

  109. User Avatar
    Aj Banda
    Permalink to comment#

    Wow! perfect for my project. Thanks for this I can add shadow boxes not on my elements and would not worry on IE trouble.

  110. User Avatar
    gashkori
    Permalink to comment#

    can any one tell me how to load png images in IE7 using css.
    i tried my best but nothing got. I have tried filter method but it doesnot work for ie7
    Please help…

  111. User Avatar
    Amit Pandey
    Permalink to comment#

    This is working in IE7.

    <div id=”oFilterDIV”
    style=”position: absolute;
    top: 50px;
    left: 10px;
    width: 240px;
    height: 160px;
    padding: 10px;
    background: yellowgreen;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=’gray’, Positive=’true’)”>
    This is the div content.</div>

  112. User Avatar
    Ugur Ozer

    thnk you so muh for this post.. its workin in ie also

  113. User Avatar
    tarik

    FOR all browsers including IE.

    
    -moz-box-shadow: 0 8px 6px -6px #000;
    	-webkit-box-shadow: 0 8px 6px -6px #000;
    	box-shadow: 0 8px 6px -6px #000;
    	/* For IE 8 */
    	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
    	/* For IE 5.5 - 7 */
    	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
    

    IE still can’t give the full flavor, but it’s better that nothing!

  114. User Avatar
    how do you get free xbox live

    Hello, all the time i used to check weblog posts here
    in the early hours in the daylight, as i like to gain knowledge of more
    and more.

  115. User Avatar
    Sergio

    Thanks for the script. I prefer to use CSS3 PIE “plugin” but it’s good to know and understand the different solutions.

    @Mottie, thanks for the links.

  116. User Avatar
    Nate

    Maybe I’ve been at it too long and I am missing something obvious but I was unable to get a solid box shadow (no blur) on Android (HTC Incredible [2.3.4] and Motorola Droid 1 [2.2.3]).

    This was not working:

    -moz-box-shadow: 0px 0px 0px 4px red;
    -webkit-box-shadow: 0px 0px 0px 4px red;
    box-shadow: 0px 0px 0px 4px red;

    Setting the blur to 1px was the closest I could get to solid and still have it render on Android devices:

    -moz-box-shadow: 0px 0px 1px 4px red;
    -webkit-box-shadow: 0px 0px 1px 4px red;
    box-shadow: 0px 0px 1px 4px red;

    Hopefully this helps some other responsive developers!

  117. User Avatar
    donny
    Permalink to comment#

    Hey guys,

    Does anyone know of any way to portray the same results for the “text-shadow” property in IE?

    Many thanks.

  118. User Avatar
    TAB
    Permalink to comment#

    I have been Googling this for hours and it is driving me nuts…….
    I have the style for some thumbnails set to have a 2 point radius with a box shadow and a gradient border padded out to look like a polaroid. It’s working fine in Firefox BUT I also want to add in an inset shadow or inner border to make the framed image look a smidge inset. I can only get the the inner shadow to show over the border, not inside it. Maybe it’s not possible but I came across this old post and thought maybe, perhaps, someone might know the fix. Here’s the code I am using (sans inner shadow):

    
    
    #slc-background2.c {
     border-width: 0px; 
     vertical-align:top;  
     /*colors: #F5F7FA #F0F1F5 #E6E8F2*/
     padding:6px !important;
     margin: 0px !important;
     padding-bottom:20px !important;
     background: #E6E8F2;
     
     border-radius: 2px;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
     
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #e8e8dc 29%, #fcfff4 71%, #e8e8dc 94%, #e9e9ce 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(29%,#e8e8dc), color-stop(71%,#fcfff4), color-stop(94%,#e8e8dc), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#e8e8dc 29%,#fcfff4 71%,#e8e8dc 94%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfff4 0%,#e8e8dc 29%,#fcfff4 71%,#e8e8dc 94%,#e9e9ce 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfff4 0%,#e8e8dc 29%,#fcfff4 71%,#e8e8dc 94%,#e9e9ce 100%); /* IE10+ */
    background: linear-gradient(top, #fcfff4 0%,#e8e8dc 29%,#fcfff4 71%,#e8e8dc 94%,#e9e9ce 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */}
    

    For my and others enlightenment, if you can fix it, please do :)

  119. User Avatar
    Bilal
    Permalink to comment#

    who cares it works on ie or not…only 9% are using IE ..those are we developers who use it to test sites :P….IE always Su*K

    • User Avatar
      f1ss1on
      Permalink to comment#

      Yes, IE sux. But you are wrong Bilal about percentage of people who use IE. I recommend checking this out

      Link to Browser Statistics

      So, in the meantime, support for great user experiences is still needed.

  120. User Avatar
    Chris
    Permalink to comment#

    Windows XP sucks. Completely. It’s far out dated.

    MS will drop support next year – so just hold your bunions tight. The time is coming.

  121. User Avatar
    Muqtasid Mansoor

    I love your site! Oh and it should work with IE 9/10? My site would be made for the future, not the past.

  122. User Avatar
    Alicia
    Permalink to comment#

    Thanks! I used the code in a new design. :)

  123. User Avatar
    Callum
    Permalink to comment#

    How do you get it so the left and right side have a shadow, but the top and bottom don’t? Thanks

  124. User Avatar
    donny
    Permalink to comment#

    Unfortunately, at the moment css doesn’t give the option to assign a width and height to the box-shadow property. It works in the same way as a border, wrapping itself around the outter edge of the element it is applied to.

    A solution that I would suggest to achieve what it is that you are looking for, is to create 3 divs within a container div, stacked horizontally as blocks. Make the top and the bottom div very small in height, and add the box shadow to the middle div.

    The top and the bottom div will effectively hide the box shadow, if your z-index is in the right configuration. You might need to alter the z-index slightly to get this to work.

    I hope this helps!

  125. User Avatar
    himu
    Permalink to comment#

    When I use this box shadow css

    box-shadow: 1pt 1px 4px rgb(165, 165, 162);

    it give me a shadow in my box’s right and bottom side but also some thin shadow on top and left side. i don’t want this. I only want box shadow on right and bottom side.

    If i change the blur 4 to 1 then the problem become solved. but i don’t want to change this blur value. i want keep it on 4.

    can anyone help me on this ?

  126. User Avatar
    RMF
    Permalink to comment#

    I have added a drop shadow via the div tag to some images on my site. For some reason, I’m getting a white margin of space between the bottom of the image and the shadow. In other words, it makes my images look like polaroid prints with a large white border at the bottom.

    Also, the shadow extends beyond the images to the right quite a bit.

    Here’s the code that I used:
    .one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    }

    Can any of you bright, experienced folks help me with this one?

  127. User Avatar
    Lucky
    Permalink to comment#

    Does it support IE 6,7,8 & Safari Browser ?

  128. User Avatar
    Irfan
    Permalink to comment#

    Thx for sharing . . .
    I’ll use for my design.

  129. User Avatar
    ashish
    Permalink to comment#

    Really these are very cool shadows but i like one side shadow and the inner shadow thx for this cool tips for box shadow.

  130. User Avatar
    steve
    Permalink to comment#

    Hi ,
    I really want to know which plugin you use to style the code snippets in your posts. Thx !

  131. User Avatar
    Sal
    Permalink to comment#

    Thank you – very clear!

  132. User Avatar
    Steve
    Permalink to comment#

    Thanks for helping with this. I was trying to convert my nice Photoshop’d image tabs into fully CSS text boxes with html. This has helped with my SEO I guess, but I was bashing my head trying to get the look right. But this tutorial has helped me achieve the 3d look I needed.

  133. User Avatar
    prabhu
    Permalink to comment#

    brilliant site :)

  134. User Avatar
    M.R.
    Permalink to comment#

    Thanks for the great tips, Chris.

    On the previous version of your website, you had a brushed-metal background for some of the text boxes. Would you mind if I use that on a (non-comercial) website I am working on? Thanks again.

  135. User Avatar
    shashank
    Permalink to comment#

    I want to create dropshadow for png image in css div . So any one can help me??

  136. User Avatar
    jMike
    Permalink to comment#

    Hey Chris … I want to says THANKS for all of the awesome work you do! This is just a general comment not specifically about this post… but man I use your site constantly for reference, and have learned so much from your awesome techniques :)

    Just want to let you know that I am a big fan of your work! Cheers – jM

  137. User Avatar
    Chris Coyier
    Permalink to comment#

    Thanks =)

    I’m gonna bury this comment just in an attempt to keep the thread on topic for this specific content.

  138. User Avatar
    Scott
    Permalink to comment#

    hey Chris, can you help me make this css for shadow work in IE9? I can’t seem to get it working and also IE9 is making all the text bold. I appreciate anyone here that can help me out with this. Thanks

    http://pastebin.com/vBw71XDi

    Here is test site , can see difference in chrome, firefox and IE9
    http://814media.com/gomobile/video-test/

  139. User Avatar
    covers
    Permalink to comment#

    I just tried this shadow effect and it is working. Thank you for sharing.

  140. User Avatar
    Chandra
    Permalink to comment#

    Chris, Can we have both box-shadow and inner-shadow applied to an element? I believe we cannot. I think we need to have a nested element or something to emulate that kind of look and feel.

    Thanks
    Chandra

  141. User Avatar
    Warner
    Permalink to comment#

    Chris,

    I had a problem where the box-shadow was not working for me on Mac OS X 10.8 with Safari 6.0.2 (8536.26.17) and iOS 6.0.1 with Safari. I had to explicitly give the Spread a 1px value to get it working.

    Mac OS X 10.8 with FF 16.0.2, Chrome 22.0.1229.94 and Opera 12.02 where working fine without the spread, so was Chrome on iOS 6.0.1 and Safari on iOS 5.1.1

    Without a doubt i didn’t read the updated specs and got my css borked because of this.

  142. User Avatar
    wiyono
    Permalink to comment#

    really nice…
    thank you

  143. User Avatar
    duni
    Permalink to comment#

    Chris,

    I am face a problem with background-attachment:fixed; property does not support in mac browser site url is: bestblinds.co.nz please provide any solution.

    Thanks
    Duni

  144. User Avatar
    Sean Vandenberg
    Permalink to comment#

    Thanks so much for posting this. —Very clear and easy to understand!

  145. User Avatar
    Nafees
    Permalink to comment#

    Need Help..

    Why shadow is cutting off in both side left and right, if i use float property..

  146. User Avatar
    Snap In Media
    Permalink to comment#

    Thanks so much for this post. I’m not the best at CSS tweaks but this post was just what I needed to save me some time.

    Thanks and keep up the great work!

  147. User Avatar
    Mare
    Permalink to comment#

    This can be done with single line.

    <

    div style=’box-shadow:inset 1px 2px 2px #000; border:#0b0b0b solid 1px;border-radius:3px; background:#222; width:50px;’>

    and work in any browser. I dont try on IE6, but on other works

  148. User Avatar
    Kralinator
    Permalink to comment#

    If everyone knows this doesn’t work in IE6 and CSS3 isn’t supported, why bother creating workarounds that don’t affect the function of the website? Surely it’s best to let people see that newer browsers support newer features and therefore offer a reason to upgrade.

    • User Avatar
      Afy
      Permalink to comment#

      People still stuck in the stone age will simply assume your website is broken and/or the designer hasnt done their job properly!
      With a little consideration while designing however, these css3 tricks if not supported by older browsers will degrade nicely and not effect the function and layout of the site.

  149. User Avatar
    Prabhu
    Permalink to comment#

    Hi Chris,
    box-shadow inset property will support different colors? I tried but not able to get it. Please help me.

    Thanks, Prabhu

  150. User Avatar
    A.Charles
    Permalink to comment#

    It is working fine for me

  151. User Avatar
    Tokotua
    Permalink to comment#

    I’ve tried it and it worked, I was interested in the One-Side Only,

    thank you for sharing

  152. User Avatar
    Spencer Larry
    Permalink to comment#

    I refer to this page all the time! Thank you!

  153. User Avatar
    Bhuwan
    Permalink to comment#

    Help me out from Jam :) Thank you so much. Awesome site for CSS tricks.

    Bhu1

  154. User Avatar
    Santiago
    Permalink to comment#

    I have to say you’re website and teaching style are the best I’ve seen across the internet. Whenever I need help with CSS your website is the first one I go to. Thanks!

  155. User Avatar
    Roy M J
    Permalink to comment#

    This website is the most incredible one that i have come across which uses intense css3. amazing stuff..

  156. User Avatar
    Shanmugananthan
    Permalink to comment#

    Thank you! It’s useful to me.

  157. User Avatar
    Mounir
    Permalink to comment#

    How would I apply this to my CSS Style Sheet? #StillNewWithCSS
    by the way I like your website .

  158. User Avatar
    Erick
    Permalink to comment#

    Ik have some element that only have shadow at the bottom. I’ve changed the box-shadow, but what do i have to change here to reach the same effect in IE8 (and older)? I don’t have IE8 tot test on.

    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)”;
    zoom: 1;

  159. User Avatar
    Armani S. Valtier

    I did it! Are there any ways to get around the uneven edges of the border radius, though? I hate how the corners aren’t all evened out…

    http://arcrammer.zymichost.com/cousus/

    ^ an example to show what I’m talking about ^

  160. User Avatar
    dharmik

    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;

  161. User Avatar
    dharmik

    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;

  162. User Avatar
    Melwyn Pawar
    Permalink to comment#

    A lot can be done by box-shadow, css tricks has helped me enhance my CSS skills. Check out the portrait done using box-shadow http://pikcle.com/css-art/faceart.html

  163. User Avatar
    Melwyn Pawar
    Permalink to comment#

    Multiple box shadow implementation around my own vector potrait
    http://pikcle.com/melwyn/

  164. User Avatar
    Oneng

    for me work this solution:

    .views-row {position:relative;}
    .views-row.active:after {-webkit-box-shadow: inset 0 0 0px 8px #FF7777; box-shadow: inset 0 0 0px 8px #FF7777; content: “”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

  165. User Avatar
    Fauzi
    Permalink to comment#

    Inner Shadow look like 3D, I learned lot of new things which explores my knowledge in various developments. Thank you!!

  166. User Avatar
    Wedus
    Permalink to comment#

    Does not work for IE8, waiting solution

  167. User Avatar
    Angel Anderson
    Permalink to comment#

    Thank you, you save me a ton of time by having this code here. Just what I was looking for!!!

  168. User Avatar
    Ryan McGovern
    Permalink to comment#

    Thanks for clarifying all that for me… p.s, when I read these tricks, everybody’s problem seems to be IE9! Why they got to be difficult, now come on, someone please explain!? :D

  169. User Avatar
    Stu
    Permalink to comment#

    I have stopped trying to make effects like this work for IE8 – not worth the bother to try to cater for that rubbish software!

    Anybody still using IE has only themselves to blame for being dumb as a brick!

  170. User Avatar
    Shahbaz Ahmed Bhatti
    Permalink to comment#

    Dear Sir Chris, i wana be expert in css like you can u please tell me where i started leanr, and whihc book u study for learning
    Please it a request

  171. User Avatar
    ralph
    Permalink to comment#

    how to apply sliding type on menu bar background?

  172. User Avatar
    Sanjeev
    Permalink to comment#

    Hello Bro’s.

    box-shadow: inset is working in IE 8? i used PIE.htc also but inset box-shadow is not working in IE8. Can you give me any suggestion for this issue.

    I wrote below css:

    moz-box-shadow: inset 3px 4px 9px -4px #CECECE;
    -webkit-box-shadow: inset 3px 4px 9px -4px #CECECE;
    box-shadow: inset 3px 4px 9px -4px #CECECE;

    Thanks in advance, Looking for suggestion.

    Thanks & Regards,
    Sanjeev

  173. User Avatar
    Sean Mitchell

    Quick question…is it possible to use this type of css effect to surround a youtube video embed?

  174. User Avatar
    Savic
    Permalink to comment#

    I understand there side shadows can be directly regulated in code, but how to make it transparent indeed? When there is background image- its really important.

  175. User Avatar
    Ajay Walia
    Permalink to comment#

    box-shadow: 5px 5px 5px rgba(68,68,68,0.6); support to IE and safari browser?

  176. User Avatar
    Guest
    Permalink to comment#

    Here is how to make it work in all browsers like IE, Chrome, Safari, FireFox and more!
    Here’s How
    You need to add browser prefixes that look like this: -webkit-box-sha...
    Here’s and Example:

    -o-box-shadow:    3px 3px 5px 6px #ccc;
    -ms-box-shadow:    3px 3px 5px 6px #ccc;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    
  177. User Avatar
    Md Ashraf Malik
    Permalink to comment#

    i want to drop shadow for a object when i change the value of a input range using javascript can any one help me

  178. User Avatar
    David Tintner
    Permalink to comment#

    I found a bug in the latest version of Chrome with large box-shadow insets. The browser and scrolling start to lag and if you use more than 200px or so it almost completely crashes. not cool. Hope this prevents a couple of headaches http://hackingui.com/front-end/chrome-box-shadow-bug-that-crashed-our-site/

  179. User Avatar
    sam
    Permalink to comment#

    Can you tell me how to get a shadow that is bigger on the left edge and right edge below and thinned at the center below.
    No shadow on three sides.
    Is it possible?

  180. User Avatar
    osman
    Permalink to comment#

    hi .thanks a lot .
    question : how can add shadow inset just to left text box ?

  181. User Avatar
    Liz
    Permalink to comment#

    Anyone know of a way to shadow a box without having to specify the height? I have one with a Feedburner link that will be a different size every time a new post goes on the blog it’s linked to. “Height: auto;” doesn’t work, just turns the whole thing the background color.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag