Drop shadow effect

Did you notice the sweet drop shadows I’ve used on my Best Designed Sites of 2013 images? Like this one…

Android.com - top 10 best designed websites 2013

You may have wondered how it’s done. I’ll share the CSS here, and break down how it works for you.

The effect is achieved with a single CSS class that’s part of my stylesheet, so I just need to add that classname (“ds”) to any image to get that to appear automatically. I use it everywhere now.

Here’s the CSS, with spacing all lined up for you to make it easier to understand:

.ds {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
                        0 1px  4px        rgba(0, 0, 0, 0.3),
                        0 0    40px       rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:    0 15px 10px -10px rgba(0, 0, 0, 0.5),
                        0 1px  4px        rgba(0, 0, 0, 0.3),
                        0 0    40px       rgba(0, 0, 0, 0.1) inset;
     box-shadow:        0 15px 10px -10px rgba(0, 0, 0, 0.5),
                        0 1px  4px        rgba(0, 0, 0, 0.3),
                        0 0    40px       rgba(0, 0, 0, 0.1) inset;


The 3 lines (-webkit-box-shadow, -moz-box-shadow, and box-shadow) are just for browser compatibility, but you’ll notice the actual settings are identical on each one.

The definition actually tells the browser to draw 3 shadows, separated by commas. These will all be overlaid on each other, to create the subtle and shapely combined effect.

(Actually, only the first two create the drop shadow effect you see. The third shadow is inset, but we’ll come to that.)

The first value is horizontal-offset. That’s zero in all 3 shadows in this case, because the effect is centred on the object.

The 2nd setting is vertical-offset. That’s 15 pixels in the first one, meaning the shadow will be moved downward 15px in the case of the first shadow, just 1px on the 2nd, and nothing on the 3rd. (Negative vertical offsets will move the shadow up.)

Setting #3 is the blur size. Zero would give you a solid shadow with a hard edge. For these shadows, they’re 10 pixels, 4pixels, and a massive 40 pixels.

Now comes a wrinkle. Shadow #1 uses an optional fourth pixel setting, which controls “spread distance”. In brief, a positive value will give you a shadow that is bigger than its object. In this case, the value is -10px, which means the shadow is actually smaller than its element, which gives the impression that the image is standing off the page.

The fourth/fifth value in these is the colour setting. You can use standard hex, but this is using rgba, which means you can set red / green / blue / alpha. The colour settings are all 0, 0, 0, i.e. black. (255, 255, 255 would be white / 255, 0, 0 would be bright red.)

Alpha equates to opacity (where 1 = 100% opaque = solid, and 0 = totally transparent). So shadow #1 is 50% opaque/transparent, shadow 2 is 30% opaque, and shadow 3 is just 10% visible.

The final twist is that shadow #3 is inset, which means it’s actually an inner-shadow, not a drop-shadow. Just like Inner Shadow in Photoshop. That gives the images a sexy 40px-blurred, only 10% black kind of vignette effect.

However, note that although the inner shadow shows on the coloured divs in my examples, it does not appear when the element is a solid image. (It will show if the image has transparent areas.)

Visual Breakdown of the 3 Shadow Styles

Here are the shadows set out individually, using a simple div:

Shadow 1
Shadow 2
Shadow 3

And here are the 3 individual shadows, but with their effects exaggerated for clarity:

Shadow 1+
Shadow 2+
Shadow 3+

And finally, here’s the same style of div, with my .ds class applied:

About the author



Leave a comment: