Treehouse

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.

ydkjs-5.png

Recent Features

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the...

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things...

Incredible Demos

  • Background Animations Using MooTools

    One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here's...

  • Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's

  • Multiple File Upload Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my...

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!

Use Code Editor