Cross Browser CSS Box Shadows

By  on  

Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we aren't good with graphic creation, however, doesn't mean that our clients wont effects like box shadows.  Once such project recently popped up for me, so I sought a cross browser compatible solution for programmatic box shadows.  Here's my solution.


As you can probably imagine, Internet Explorer is the odd duck when it comes to accomplishing CSS box shadows.  The other browsers stick to a more unified syntax:

div.shadow {
	-moz-box-shadow: 3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');

There are four main pieces to the -box-shadow property: offset-x offset-y, blur-radius, spread-radius, and color.  Internet Explorer's syntax is a bit uglier and less configurable, but allows for CSS-based box shadows nonetheless.  If you specify the inset keyword at the beginning of the box-shadow value, the box shadow will appear inside the element!

Like border-radius, gradients, transformations, and a variety of other relatively new CSS properties, advancements in CSS are helping Photoshop-inept developers like myself to create programmatic art.  I do have to admit that box shadows are nice and can provide a small layer of depth.

Track.js Error Reporting

Upcoming Events

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

  • Dijit’s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...


  1. Ryan Kilimnik

    I tried viewing the demo using ietester for 5.5, 6, and 7. Doesn’t seem to be working. Is the demo set to work in IE?

    • Adding a straight “filter” property will accommodate for those properties.

  2. Daquan Wright

    I’m using the box shadow property on my footer in my first official website theme. :)

    I love the effect of making a box cascade into the background, much more than Photoshop at least. Though I am a user interface designer, so I’m quite comfortable with designing in that tool if need be.

  3. David-
    Thanks for posting your solution. I’ve run into a weird situation with this and I can’t find anyone addressing it. I’ve coded some dropdown menus to have a 10 px border radius only on the bottom left and right corners. The top corners are 90 degrees so they bump up to the main menu nicely. However, the box shadow for the dropdowns has the 10px radius on all four corners. This is not a huge deal as it is barely perceptible behind the dropdown, but you can notice the shadow fading away as the dropdown touches the main nav. I’m curious about why its happening. See example here:
    Any ideas?

  4. Its cool effect and work.Its also works fine in IE 6.0 I will use this in my future website .
    You can see this effect on this website.

  5. Box-Shadow works perfect in all browsers. Thanks for sharing!

  6. Thanks for your help. Just implemented this drop shadow effect on by design blog. Really thankful to you.

  7. ayub

    box-shadow inset not works in safari… why??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!