Grow your CSS skills. Land your dream job.

Last updated on:

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

  4. 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. looks very nice!
    thx for sharing with us. just waiting for a workaround for IE 7/8 without any images!

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

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

    • Permalink to comment#

      Perhaps try a negative vertical offset?

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

    • 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. Inset does not work bro!?

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

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

    • 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. not working in IE7

  15. not working in IE8 either :(

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

    • Permalink to comment#

      I was just thinking the same thing.

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

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

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

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

    • Looking for an answer to this too.

    • 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:
      http://starikovs.com/2011/11/09/css3-one-side-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?
    Thanks.

  28. 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. 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. 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. This is great, but will IE ever get with it? Seems like there’s always some sort of drastic work around. So annoying!

  34. Permalink to comment#

    is there any way to get it working on images?

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

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

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

  37. Thank you very much, this is great!

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

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

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

    • 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. 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. 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. Trying to use the inset shadow for a div around a set of scrolling images. But the images appear over the shadow. Any suggestions?

    • 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. CSS Drop shadow methods CSS Inset Drop Shadow

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

    Great website, now is my favorite:)

    Thank you for the simple and clear description.

    Greetings!

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

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

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

    Cool css thing but it not working in internet explorer.

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

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

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

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

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

    Nice site guys good info

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

  87. 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. Good Stuff…that’s what im looking for!

  91. 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.
    Thanks,
    Ali

  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

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

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

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

    Really helpful …
    Thanks

  104. 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. Ultimate CSS Gradient Generator from ColorZilla Firefox Plugin does a very nice job in giving previews and code generation, Including IE 9 support.

  106. 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. 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. 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. 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. 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. 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. 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; 
     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. 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

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

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

  128. Permalink to comment#

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

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

    http://pastebin.com/vBw71XDi

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

    http://814media.com/gomobile/video-test/

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

    Thanks
    Chandra

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

    really nice…
    thank you

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

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

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

    thank you for sharing

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

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

    Bhu1

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

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

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

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

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

  162. 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. Multiple box shadow implementation around my own vector potrait

    http://pikcle.com/melwyn/

  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. Does not work for IE8, waiting solution

  167. How to give shadow to photo image

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

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

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

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

  172. ralph
    Permalink to comment#

    how to apply sliding type on menu bar background?

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".