Used in casting shadows off block-level elements (like divs).
.shadow {
box-shadow: 3px 3px 5px 6px #ccc;
}- 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.
- 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.
- The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
- 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).
- Color
Example
Inner shadow
.shadow {
box-shadow: inset 0 0 10px #f8a100;
}Example
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 {
box-shadow: 0 8px 6px -6px black;
}Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 3.5* | 9 | 12 | 5* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 133 | 135 | 4 | 4.0-4.1* |
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 IE */
box-shadow: 5px 5px 5px rgb(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;
}More information
- CSS Backgrounds and Borders Module Level 3 specification (W3C)
- CSS Tip: Multicolor & Cutout Drop Shadows (DigitalOcean)
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
Just tossed an example in there.
Hi cris
How we can fix shadow in IE
If you got any idea related to this
thnks
muhaha
I’ve created a tutorial and sample page on my website with examples of some pretty slick uses of the css box shadow property. Check out the tut and live demo here: http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/
yeah – you can also add a css rounded corners to that – it will bring much more pleasant look
Any way to make this work in IE7 or 8?
Nope. IE 9 will be supporting
box-shadowthough, so fear not!Tried it in IE9 Beta and it fell on its face.
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 :)
Thanks to the Chrome Frame from Google it’s now possible to enjoy this in IE 6, 7 and 8.
http://code.google.com/chrome/chromeframe/
I love it and use it on all my projects.
check out css3pie.com
IE 6 to IE-8 not works.
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/)
Drop-shadow Generator
I created a drop-shadow generator that actually works with IE7 & 8
Hi, Can you please tell me how to resize the width of boxshadow as per text size automatically ? Thanks.
Here is how to make it work in all browsers including IE, Chrome, FireFox, Safari and more!
Here is How:
You need to add the browser prefixes that looks like this:
-ms-box-sha...Here’s an Example:
HTML5
CSS
How can i make curved box shadow ?
You can try using it with
border-radiusto create a curved edge. Or, perhaps consider usingfilter: drop-shadow()for more complex curves.I think you’ve got an extra zero in your inset code there–your reference url writes it thusly:
whereas you have
Indeed that was a mistake. Funny how it works just fine even with that mistake though eh? Not all properties are that forgiving.
It works because that fourth value is actually valid. It’s called “spread radius.”
I found this website, which describes in more detail what you can do with the box-shadow property (including fun things like multi-colored shadows). – http://fredericiana.com/2009/06/12/shadow-boxing-with-moz-box-shadow/
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).
looks very nice!
thx for sharing with us. just waiting for a workaround for IE 7/8 without any images!
Agree, the inner shadow css looks very good on my home page for my opt in box.
Loving this site!
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.
not working in ie…..
IE doesn’t support ANY CSS3, not until IE9 comes out.
Any webby person out there would know this.
Just curious. How do you make the shadow equally go around the box. As opposed to just off to the right?
set the horizontl and vertical offsets to 0px…
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?
Perhaps try a negative vertical offset?
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.
@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;
}
Any workaround for webkit?
Inset does not work bro!?
Bleeding edge here folks. Works in the Webkit nightlies:
Link here.
thanks for sharing it with us, an interesting article and I have tried it and the results are amazing ..
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.
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.
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…
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
@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. :)
not working in IE7
not working in IE8 either :(
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.
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.
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
This is *the* solution for IE.
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?
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?
Thaks, man.I was looking for this tutorial.
Just wanted to share something i noticed with box-shadows in Firefox (or probably any mozilla based browser).
If you use as a wrapper, give it a width, a bg(-color), 100% height and give it a box-shadow you will notice that the element doesn’t stretch completely to the bottom of the screen/browser…what i’m trying to say is, it doesn’t “touch” the frame of the browser as it is supposed to when using 100% height. In Webkit based browsers it works as expected. It seems to be that Firefox makes room for the shadow.
My workaround is to apply a negative Y-offset to the shadow in Mozilla Browsers. The offset should be at least as big as the blur.
-moz-box-shadow: 0px -10px 10px #color;
gives you a shadow on the right and on the left of the element, while the top and the bottom stretch completely to the edges of the browser.
I hope it’s clear what i mean and it can avoid some confusion.
Thanks for that Clemens, could not work out how to fix it but you saved me!
I’d suggest this as a solution, but with the caveat that I don’t think the shadow will extend as far as the bottom if you use this techinique. In other words, the shadow (due to the fade/blur value) will fade out starting at that negative vertical offset. Basically a negative vertical offset will just move the entire thing up, so you won’t really quite get the effect you want. Unless someone knows some magic concerning one of those values that I’m missing…?
By the way,that sort of effect cab be accomplished via multiple backgrounds (which yeah, isn’t as elegant) but sure can make things look nice and in fact give you a finer grained control over the whole thing. Border-images works as well, but its a bit more tricky.
Yet another reply, I know, but the easiest way to achieve this CSS3 effect(although again, with its own drawback) is to just wrap your ‘shadowed’ element, the one with the box-shadow applied within a parent element with overflow:hidden set. This has a couple of big caveats: 1) its easier to do if you know the dimensions of your objects, which might not always be possible and 2) you need to add extra markup which is a pain. Still, you might find yourself in situations where the extra markup is already there and for things like nav elements its more likely you know some of the dimensions anyway. The good thing about this technique is that it also degrades pretty well, whereas extra background images or custom graphical treatments probably wont and are more time consuming to generate.
Thanks Clemens, you just made my day :)
The box shadow was causing a gap to appear at the bottom of the page that was suppose to be 100% height. I noticed the box shadow was responsible but didn’t think to reverse the y axis. Good find.
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?
It is not working in IE 7 and 8.
Is there any way that I can achieve the same affect when a user just hovers over a box?
Why not just use a pseudo class
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)
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…;);)
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;
}
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.
Thank you sriram! :-)
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.
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.
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:
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:
Try overflow hidden solution to one side shadow or one side without a shadow:
http://starikovs.com/2011/11/09/css3-one-side-shadow/
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.
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 :)
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).
Helpful. but what about IE ?
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;
Just add below to give your border more roundness:
-moz-border-radius: 15px 15px 15px 15px;
Hope it’s helpful to someone.
This is great, but will IE ever get with it? Seems like there’s always some sort of drastic work around. So annoying!
is there any way to get it working on images?
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.
Thanks Mac! That one works for inner shadow on images.. :)
Very helpful, I went to my code directly to perform changes!
it works on all browser except the main one :) IE
Good news IE has less that 50 percent of the browser market it is no longer the main one :D
Thank you very much, this is great!
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…
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.
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?
Nice post, Thanks to sharing., Css shadow effect in IE with example here http://discoverweb.info/css-shadow-for-ie.html
thnk you so muh for this post.. its workin in ie also
This doesn’t work.
It’s amazing that even IE8 still sucks.
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.
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.
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.
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.
It’s actually fairly simple, using pseudo elements. I wrote up an article over on my development blog for it. http://netuncovered.com/2011/06/css-pseudo-shadows/
man thanks
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)
box shadow has since been dropped from css3 spec
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…
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).
Hey . anyone can help me. ? i want my box with the shadow wrapping around it . not for just two edges .Can css do it ?
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…
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?
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
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?
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;
}
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.
Here is a outer glow thingy too:
The HTML:
The CSS:
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.
use position:absolute in your css file
n try 2 use z-index possibly showing your links active.. keeping your content intact
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.
does this apply to tables? i mean.. i won’t put in a div.. just in the table.
I dont want shadow at the bottom.
what should i do?
plz tell.
CSS Drop shadow methods CSS Inset Drop Shadow
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!
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.
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…
Great website, now is my favorite:)
Thank you for the simple and clear description.
Greetings!
Hi dears, I have a problem with the shadow:
I have the folllowing page:
The
headerelement have a shadow proprety, but, when I apply the background gradient at thedivelement, it overflow the shadow.How to solve it?
Here the CSS:
What is all this talk about IE – is that a web browser, or something?
Your Articles are very useful.
Thanks a lot
Use javascript call modernizr
takes care of all the browsers’ inconsistency.
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 :(
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.
Very nice shadow effect. Added to my box.
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
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
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
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.
Cool css thing but it not working in internet explorer.
I want the shadow to appear only on one side(say right only)
How can we achieve this.
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.
Tnank’s for the article, very useful!
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;
}
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
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
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.
Any way to do an inset box shadow on only 3 sides?
Can you put that effect in a box, then y=use it as a hover, put some transition, that would be LEGIT!
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
Sorry, I should have added?
“With a blur too.”
Oops, spoke too soon. Sorry all.
box-shadow:inset 0 -10px 10px 0 #000000;
How can we add shadows to all the four sides of a div?
Please reply ASAP. :)
.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
ie8 box shadow sucks!!
How did you design the Heading Box of this website in which written “CSS TRICKS” box and vertical text. Can you please guide
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…
Nice site guys good info
Thank you Cris, so inspired me to make themes for blogger platform. It’s really useful for me. Warm Regards, Borneo Templates Admin.
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.
Hi chris,
Box shadow property did not work in my mobile site
what to do?
Thanks for the info. And screw IE.
Good Stuff…that’s what im looking for!
wow its work tq
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
Its working. You are so great . And be like this , and keep helping human.
How can i put the shadow at right and left side of a web page…
hi ……. dat was really helpful atleast for me being a beginner
You can put shadow on left and right by the following code.
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.
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.
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.
Thank you.
And how to set both inner and outer shadow on one element?
Yes, please, I would also like to know how to make both inner and outer shadow on one element?
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;
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.
Very nice work! But one more thing: could you please tell us how to make the One-Side Only example work on IE 7+?
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.
Really helpful …
Thanks
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?
Ultimate CSS Gradient Generator from ColorZilla Firefox Plugin does a very nice job in giving previews and code generation, Including IE 9 support.
Good Stuff…that’s what im looking for! thx
Very, very helpful
Thanks so much!
very helpful knowledge!
thank you very much!!
Wow! perfect for my project. Thanks for this I can add shadow boxes not on my elements and would not worry on IE trouble.
This blog post has some really cool box shadows: 39 Ridiculous Things To Do With CSS3 Box Shadows.
Also, if you are interested, there is a github repository.
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…
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>
thnk you so muh for this post.. its workin in ie also
FOR all browsers including IE.
IE still can’t give the full flavor, but it’s better that nothing!
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.
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:
Setting the blur to 1px was the closest I could get to solid and still have it render on Android devices:
Hopefully this helps some other responsive developers!
Hey guys,
Does anyone know of any way to portray the same results for the “text-shadow” property in IE?
Many thanks.
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):
For my and others enlightenment, if you can fix it, please do :)
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
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.
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.
I love your site! Oh and it should work with IE 9/10? My site would be made for the future, not the past.
Thanks! I used the code in a new design. :)
How do you get it so the left and right side have a shadow, but the top and bottom don’t? Thanks
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!
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 ?
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?
Does it support IE 6,7,8 & Safari Browser ?
Thx for sharing . . .
I’ll use for my design.
Really these are very cool shadows but i like one side shadow and the inner shadow thx for this cool tips for box shadow.
Hi ,
I really want to know which plugin you use to style the code snippets in your posts. Thx !
Thank you – very clear!
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.
brilliant site :)
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.
I want to create dropshadow for png image in css div . So any one can help me??
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
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/
I just tried this shadow effect and it is working. Thank you for sharing.
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
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.
really nice…
thank you
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
Thanks so much for posting this. —Very clear and easy to understand!
Need Help..
Why shadow is cutting off in both side left and right, if i use float property..
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!
This can be done with single line.
and work in any browser. I dont try on IE6, but on other works
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.
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.
Hi Chris,
box-shadow inset property will support different colors? I tried but not able to get it. Please help me.
Thanks, Prabhu
It is working fine for me
I’ve tried it and it worked, I was interested in the One-Side Only,
thank you for sharing
I refer to this page all the time! Thank you!
Help me out from Jam :) Thank you so much. Awesome site for CSS tricks.
Bhu1
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!
This website is the most incredible one that i have come across which uses intense css3. amazing stuff..
Thank you! It’s useful to me.
How would I apply this to my CSS Style Sheet? #StillNewWithCSS
by the way I like your website .
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.
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 ^
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;
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%; }
Inner Shadow look like 3D, I learned lot of new things which explores my knowledge in various developments. Thank you!!
Does not work for IE8, waiting solution
Thank you, you save me a ton of time by having this code here. Just what I was looking for!!!
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
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!
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
how to apply sliding type on menu bar background?
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
Hello! Here is an example of an inset Microsoft Shadow working only in Internet Explorer 5.5 through 8.
No javascript is required, but this does use Microsoft’s ActiveX CSS.
Styling Explanations:
Simply copy and paste the code below into a notepad and save as a .html file. Test in Internet Explorer.
PLEASE, this code will ONLY SHOW IN INTERNET EXPLORER 5.5 THROUGH 8!
Quick question…is it possible to use this type of css effect to surround a youtube video embed?
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.
box-shadow: 5px 5px 5px rgba(68,68,68,0.6); support to IE and safari browser?
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:
i want to drop shadow for a object when i change the value of a input range using javascript can any one help me
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/
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?
hi .thanks a lot .
question : how can add shadow inset just to left text box ?
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.
maybe set a min-hieght: value instead?
Hi guys!
Just want to know why I can’t use box-shadow in Gmail (while in other domains works).
Is it like blocked for it? Why?
PS: Can I specify this rule into my html/css:
If the user is not Gmail, then use box shadow.
Else, use grey color into the background of the div:
Is this even possible?
Hey Peitro! CSS in email is often tough… like, really tough. That’s because email clients — like Gmail — have varying support for it and that support is all over the map.
I often turn to Campaign Monitor’s CSS guide when I’m working with CSS in emails:
https://www.campaignmonitor.com/css/
Looks like Gmail is among those that do not support
box-shadow:https://www.campaignmonitor.com/css/box-model/box-shadow/