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.

The CSS

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.

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

  • By
    Get Slick with MooTools Kwicks

    When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such...

Discussion

  1. Ryan Kilimnik

    David,
    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?
    Ryan

    • 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:
    http://rcs.ringwoodchristian.com/
    Any ideas?

  4. Its cool effect and work.Its also works fine in IE 6.0 I will use this in my future website http://codedunia.in .
    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!