CSS Box Shadow
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.
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
Mobile / Tablet
Internet Explorer box shadow
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
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 😀
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/
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.
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/)
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
You can try using it with border-radius to create a curved edge. Or, perhaps consider using filter: drop-shadow() for more complex curves.
box-shadow:inset 0 0 10px #000000box-shadow:inset 0 0 10px 0 #000000Indeed 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!
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.
Just curious. How do you make the shadow equally go around the box. As opposed to just off to the right?
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?
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
@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;
>
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. 🙂
Inner Shadows in CSS: Images, Text and Beyond
Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text?
Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we’ve ever seen.
Graphics
Icons, Vectors & More
Graphic Templates
Logos, Print & Mockups
Fonts
Sans Serif, Script & More
CMS Templates
Shopify, Tumblr & More
Web Templates
Landing Pages & Email
Presentation Templates
PowerPoint & Keynote
Shadow Syntax
Before we jump into inset shadows, let’s look at the basic syntax for building the two different types of CSS shadows. Even if you’ve coded these before, it’s worth a quick review just so we’re all on the same page.
Box-Shadow
Box-shadows are probably the most common type of CSS shadows. The potential uses here are incredibly diverse and developers have come up with all kinds of crazy awesome applications. The box-shadow syntax is actually fairly complex and includes six separate values. We’ll start off by taking a look at five of the most common of these.
As you can see, listed above in order, the order of values is horizontal offset, vertical offset, blur radius, spread radius and color. The first two values, horizontal and vertical offset, are fairly straightforward. Positive values will push the shadow right and downward respectively and negative values will push the shadow left and upwards. Here’s an example of both:
The latter two values, blur radius and spread radius are a bit more complicated. The biggest question that you might have is, what’s the difference? To answer this, let’s first look at the one that you’re probably the most familiar with: blur radius.
As you can see, no blur radius produces a shadow with a hard edge and a high blur radius produces a blurry edge. Pretty simple right? So what about the spread radius then? How does that differ? A picture is worth a thousand words so here’s an example:
As you can see, without affecting how blurry the shadow is, the spread of the shadow essentially grows and shrinks the surface area occupied by the shadow. If you thought of it as the size of the shadow, you wouldn’t be too far off.
If you leave off either the blur or spread radius, their values will default to zero. Looking around the web, you’re likely to see that most demos that you come across, including those on Design Shack, have no spread radius defined.
Text Shadow
Now that we have a solid understanding of how the box-shadow syntax works, we can take a look at the syntax for the other type of CSS shadow: the text-shadow. Fortunately, this syntax is even simpler than that for box-shadow.
As you can see, most of the values are the same here, so if you understand one, you understand the other. Interestingly enough though, you don’t have access to a shadow’s spread with text-shadow. It would be great if you did, but unfortunately the feature simply isn’t there.
Inset Box-Shadows
All righty, now that we’ve laid a basic foundation and you completely understand CSS shadow syntax, it’s time to jump into creating “inner” or “inset” shadows. To shift a shadow to an inset shadow, all we really need to do is add a single word, “inset.”
This is why we started with the basic syntax. As a whole, the box-shadow chunk of code can look pretty intimidating, but if you break it down as we have done, it’s actually really simple.
All of the values here essentially perform the same way, only the shadow is placed inside of the box. Here we can see how the spread of a shadow can still have a big impact on how the shadow looks:
Notice that this time I actually used RGBa color instead of a hex value. This is great for shadows because the alpha value provides a quick and easy way to lighten or darken the shadow.
With Images
It’s easy enough to throw a box-shadow onto an empty div, but what if you want to place one on an image. It sounds simple, but the reality is a little tricky. Let’s look at some code and its ultimate effect. We’ll begin with an plain old image tag.
Now we’ll target this in our CSS and add an inset box-shadow. You’d think that something like this would work:
Unfortunately, this gives us the following result. The picture is working fine, but the shadow isn’t visible!
So how do we pull off an inner shadow on an image? There are quite a few different ways to do it, all of which have their pros and cons. Let’s take a look at two popular solutions.
The first solution is to wrap the image in a div that’s constrained to the same size as the image, then set the shadow to that div while using some relative positioning and z-index voodoo on the image itself. Here’s what that looks like in code: