O'Reilly

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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

  • spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?...

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!

Recently on David Walsh Blog

  • I&#8217;m an Imposter

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • Resize an Animated GIF

    Animated GIFs are images but you can't really handle them link other types of images, like PNGs or JPEGs or even WebPs.  GIFs are kind of a video file, because they have frames, but there's no real control over how they play or loop.  My favorite image...

  • Mobile Sites Vs. Responsive &#8211; The Day After Google&#8217;s Algorithm Update

    Google recently rolled out a much anticipated update to its Googlebot web crawler. The overall theme of the update centered on mobile web browsing. You've no doubt heard any number of statistics thrown around recently about the swelling user base of mobile browsing. Well, so has...

  • Tweet from Command Line with t

    I've been obsessed with command line magic lately, as you may have noticed.  I don't plan on using every utility I've written about but I'm having fun learning about what's out there and how it's done.  My latest quandary was how one could tweet and perform other Twitter-centric tasks...

  • Web Animation using JavaScript:  Animating Text