Shadows that make your designers happy — CSS + SVG

Yeah, CSS box-shadows are great, I guess… they’re definitely pretty useful. I mean they’re okay. Let’s just say that we can do better. Our designers deserve better.

Remember this animation from Google’s announcement of Material Design? I thought it was so cool. But on the web at least, “paper” doesn’t split and combine like that. Why? Because box-shadows are always rectangles (or circles if you round them off enough), and always layer on top of one another. I’ll show you what I mean.

The middle and right options are just about the best you can get with box-shadow without dynamically flipping CSS when they’re close enough together. The far left option uses the drop-shadow filter in CSS. It’s nearly identical to box-shadow except it lacks any spread functionality and doesn’t have legacy Internet Explorer support (which we’ll talk about at the end).

Both the drop-shadow implementation and the box-shadow implementations are one line of CSS, but the former handles this use case in a far nicer way. What we need to get used to is that SVG filters are applied on the pixel level— they don’t care about what the bounds of your div are, what the padding is, or pretty much anything that isn’t RGBA data.

This is true for any of the SVG filters available in CSS, including the “url()” option which allows us to make full use of SVG filters in their entirety.

I can’t overstate enough how hugely powerful this is.

It means that we can throw literally anything inside the drop-shadowed div and it would cast a shadow around its edges. Using full-on SVG filters via the url() filter function gives us even more control.

Practical Use-cases

(lack of) Support in Internet Explorer

Every browser supports CSS filter effects, except for Internet Explorer and Opera Mini.

Come on, companies who still mandate Internet Explorer deserve to be served ugly websites, and people who voluntarily use it should already be used to seeing ugly websites.

— anonymous

(okay, it was me.)

So, while this is true, you should also try and detect IE if you use SVG filters so that you can make your sites as beautiful as you are. ❤️