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


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;


Internet Explorer Box Shadow

You need extra elements...

<div class="shadow1">
	<div class="content">
		Box-shadowed element
.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;



  1. 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. vlado
    Permalink to comment#

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

  3. Ian M
    Permalink to comment#

    Any way to make this work in IE7 or 8?

    • Chris Coyier
      Permalink to comment#

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

    • Derrick
      Permalink to comment#

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

    • 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 :)

    • 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.

      I love it and use it on all my projects.

    • monk
      Permalink to comment#

      check out css3pie.com

    • Faisal Islam
      Permalink to comment#

      IE 6 to IE-8 not works.

    • 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/)

    • Paul Piper
      Permalink to comment#

      Drop-shadow Generator

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

    • cynthia
      Permalink to comment#

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

    • 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:

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


      .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. 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. 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. mkellenberger
    Permalink to comment#

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

    • 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. 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. Saifu
    Permalink to comment#

    not working in ie…..

    • Starr
      Permalink to comment#

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

      Any webby person out there would know this.

  9. 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?

    • 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;
    • 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)

    • 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?

    • Ryan
      Permalink to comment#

      Perhaps try a negative vertical offset?

    • 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.

    • 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. dimas

    Any workaround for webkit?

  11. Luke

    Inset does not work bro!?

  12. Blognya Achot

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

  13. 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.

    • 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.

    • 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…

    • 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

    • 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. kirankumar
    Permalink to comment#

    not working in IE7

  15. ken the tech
    Permalink to comment#

    not working in IE8 either :(

  16. 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.

    • Ryan
      Permalink to comment#

      I was just thinking the same thing.

    • 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. 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

    • Joe
      Permalink to comment#

      This is *the* solution for IE.

    • 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. 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. Victor Augusto
    Permalink to comment#

    Thaks, man.I was looking for this tutorial.

  20. 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. Aparna Chakraborty
    Permalink to comment#

    It is not working in IE 7 and 8.

  22. Chris Enloe
    Permalink to comment#

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

    • 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. 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. 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. 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. 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.

    • oscar
      Permalink to comment#

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

    • Periback
      Permalink to comment#

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

    • Will D White
      Permalink to comment#

      Looking for an answer to this too.

    • 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;
    • infous
      Permalink to comment#

      Try overflow hidden solution to one side shadow or one side without a shadow:

  27. 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?

  28. 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. 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. vipil
    Permalink to comment#

    Helpful. but what about IE ?

  31. 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. 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. 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. Myk
    Permalink to comment#

    is there any way to get it working on images?

    • 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.

    • Myk
      Permalink to comment#

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

  35. Mohamed
    Permalink to comment#

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

  36. time
    Permalink to comment#

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

    • 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. Làm Web
    Permalink to comment#

    Thank you very much, this is great!

  38. 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. 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. 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. 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. Josh

    This doesn’t work.

    It’s amazing that even IE8 still sucks.

  43. 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.

    • 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.

    • 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. 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?

    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. Ivan

    man thanks

  46. 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. bob

    box shadow has since been dropped from css3 spec

    • 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…

    • 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. 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 ?

    • 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…

    • 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);

    • 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. 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. 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?

    • 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. Michael Simonson

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




    .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:




    .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. Michael Simonson

    Here is a outer glow thingy too:

    The HTML:


    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. 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?

    • Mooseman
      Permalink to comment#

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

    • 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

    • 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. ysh
    Permalink to comment#

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

  55. johntm
    Permalink to comment#

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

  56. Discover
    Permalink to comment#

    CSS Drop shadow methods CSS Inset Drop Shadow

  57. 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. 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. 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. Kasia
    Permalink to comment#

    Great website, now is my favorite:)

    Thank you for the simple and clear description.


  61. Alberto
    Permalink to comment#

    Hi dears, I have a problem with the shadow:

    I have the folllowing page:

    &lt!-- some content -->
    &ltdiv id="myID">
    &lt!-- some content -->

    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?

    • 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. Philip Hastings
    Permalink to comment#

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

  63. Itsmeagain
    Permalink to comment#

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

  64. 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. 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. karthimx
    Permalink to comment#

    Very nice shadow effect. Added to my box.

  67. 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

  68. 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.

    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);}

    Web Designer

  69. 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


  70. 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. mark
    Permalink to comment#

    Cool css thing but it not working in internet explorer.

  72. 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.

    • 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. Ansar
    Permalink to comment#

    Tnank’s for the article, very useful!

  74. 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. 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!


  76. 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. 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. heaversm
    Permalink to comment#

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

  79. 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. 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

    • Sean Jenkins
      Permalink to comment#

      Sorry, I should have added?

      “With a blur too.”

    • Sean Jenkins
      Permalink to comment#

      Oops, spoke too soon. Sorry all.

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

  81. Prabhav
    Permalink to comment#

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

    Please reply ASAP. :)

    • 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. anonymous
    Permalink to comment#

    ie8 box shadow sucks!!

  83. 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. 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. rob steele
    Permalink to comment#

    Nice site guys good info

  86. 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. 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. sagar
    Permalink to comment#

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

  89. Josh
    Permalink to comment#

    Thanks for the info. And screw IE.

  90. Jensen Designz
    Permalink to comment#

    Good Stuff…that’s what im looking for!

  91. Putri
    Permalink to comment#

    wow its work tq

  92. 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.

  93. waqas
    Permalink to comment#

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

  94. Vivek
    Permalink to comment#

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

    • arpit
      Permalink to comment#

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

    • 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. 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. 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. 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. Purpledogs
    Permalink to comment#

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

    • James
      Permalink to comment#

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

  99. James
    Permalink to comment#

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

    I found the solution at:


    You can comma-separate shadows:

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

  100. 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. 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. Grego
    Permalink to comment#

    If IE bothers you with shadowing :


    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. Sajjad sabri
    Permalink to comment#

    Really helpful …

  104. 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. 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. Chris
    Permalink to comment#

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

  107. Luis
    Permalink to comment#

    Very, very helpful

    Thanks so much!

  108. RP
    Permalink to comment#

    very helpful knowledge!
    thank you very much!!

  109. 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. 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. 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. Ugur Ozer

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

  113. 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. 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. 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. 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. 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. 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; 
     /*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. 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

    • 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. 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. 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. Alicia
    Permalink to comment#

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

  123. 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. 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. 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. 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. Lucky
    Permalink to comment#

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

  128. Irfan
    Permalink to comment#

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

  129. 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. steve
    Permalink to comment#

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

  131. Sal
    Permalink to comment#

    Thank you – very clear!

  132. 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. prabhu
    Permalink to comment#

    brilliant site :)

  134. 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. shashank
    Permalink to comment#

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

  136. 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. 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. 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


    Here is test site , can see difference in chrome, firefox and IE9

  139. covers
    Permalink to comment#

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

  140. 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.


  141. Warner
    Permalink to comment#


    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. wiyono
    Permalink to comment#

    really nice…
    thank you

  143. duni
    Permalink to comment#


    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.


  144. Sean Vandenberg
    Permalink to comment#

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

  145. Nafees
    Permalink to comment#

    Need Help..

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

  146. 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. 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. 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.

    • 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. 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. A.Charles
    Permalink to comment#

    It is working fine for me

  151. Tokotua
    Permalink to comment#

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

    thank you for sharing

  152. Spencer Larry
    Permalink to comment#

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

  153. Bhuwan
    Permalink to comment#

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


  154. 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. 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. Shanmugananthan
    Permalink to comment#

    Thank you! It’s useful to me.

  157. Mounir
    Permalink to comment#

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

  158. 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. 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…


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

  160. dharmik

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

  161. 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. 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. Melwyn Pawar
    Permalink to comment#

    Multiple box shadow implementation around my own vector potrait

  164. 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. 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. Wedus
    Permalink to comment#

    Does not work for IE8, waiting solution

  167. 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. 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. 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. 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. ralph
    Permalink to comment#

    how to apply sliding type on menu bar background?

  172. 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,

  173. Sean Mitchell

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

  174. 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. Ajay Walia
    Permalink to comment#

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

  176. 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. 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. 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. 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. osman
    Permalink to comment#

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

  181. 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.