Chris Kihneman
Feb 23, 2017 · 1 min read

This is possible, and comes down to browser support for css box-shadow, with specifically multiple shadow support. Which really means this will work in evergreen browsers and IE9+, take a look here http://caniuse.com/#feat=css-boxshadow.

To get the full look at browser support, click “Show all”, then under “Notes”, hover the line talking about “Partial support in…” and it will highlight the nodes that will not support multiple box shadows.

The actual CSS property/value looks like this (I made up the color):

box-shadow: 0 24px 30px rgba(0,0,0,0.2), 0 24px 30px rgba(200,200,0,0.2);

The stack order doesn’t seem to matter, as it must just blend them together somehow, but not 100% sure on that, just did a quick visual test. But you can play with different colors and opacities.

I’ve been using the rgba method to get opacity onto drop shadows for ages now, really helps soften them up. Hope this helps.

    Chris Kihneman

    Written by