The Difference Between CSS box-shadow and filter: drop-shadow();

January 27, 2014 | 4 Minute Read

Normally when I need to add a drop shadow to an element I will use CSS box-shadow. There's another way that I can handle this though. I can use CSS filters. They allow me to do many different things like apply gray-scale, apply sepia, blur, adjust brightness, adjust contrast, adjust hue, invert colors, saturate colors, and alter opacity.

The easiest way to think about CSS filters is to compare them to Adobe PhotoShop filters. The two apply themselves similarly. There’s a lot to CSS filters, so much so that they are deserving of their own post. In this article I’m going to focus on drop-shadow and explain the difference between CSS box-shadow and filter: drop-shadow();.

Let’s Start With box-shadow

The box-shadow property will work fine for a lot of things. For example, If you are applying a box-shadow to a square, rectangle, or even a circle using border radius, it will suit your needs just fine. But if you are doing something else like using a CSS triangle or png image with transparency, your’re going to run into problems.

.demoTriangle { 
    border-left: solid 120px transparent; 
    border-right: solid 120px transparent; 
    border-top: solid 120px #fff; 
    box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
    height: 0; 
    width: 0; 
}

Problem Solved, Use filter: drop-shadow();

We can solve this issue by using the new CSS filter: drop-shadow(); property.

.demoTriangle { 
    -webkit-filter: drop-shadow(4px 4px 5px rgba(50, 50, 50, 0.75));
    filter: drop-shadow(4px 4px 5px rgba(50, 50, 50, 0.75));
}

How Does it Work?

The CSS drop-shadow filter accepts the same values as the CSS box-shadow property.

x-offset — this value is required - it sets the distance, in a value of %, px, or em, that the shadow will be offset along the x-axis
x-offset — this value is required - it sets the distance, in a value of %, px, or em, that the shadow will be offset along the y-axis
blur-radius — this value is optional - it controls the sharpness of the drop-shadow’s edge, larger values will make the shadow more blurred
spread-radius — this value is optional - it controls how the drop-shadow grows and shrinks, positive values cause it to grow and negative values cause it to shrink
color — this value is optional - it sets the color of the shadow

Pros

Works the same as box-shadow so there’s not much to learn
Solves problems like the ones noted above

Cons

Lack of browser support
Spec is still in the working draft phase so things may change

Browser Support

Browser support is not great. CSS filters are still considered experimental because the spec is still in the working draft phase. There is currently no support in Firefox and ie, nope not even ie11.

Sources

CSS

Brian Treese