Search code examples
htmlcssshadowbox-shadow

How to have two elements share a box shadow

So I'm in a tricky situation: I have outer div wrapper that contains an inner div and a ul like so:

<div id="wrapper">
    <div id="box"></div>
    <ul id="list">...</ul>
</div>

The #list has to be absolutely positioned to be right underneath #box yet not move it and other elements around the page as it appears and disappears.

Since it's positioned absolutely, if I add a border around #wrapper, it only goes around #box. box-shadow of course acts the same. Problem is, I need a shadow that goes around both elements together seamlessly.

The three solutions I've come across while searching google/stackoverflow are:

  1. Give both elements their own shadow and then use -webkit-clip-path to get rid of the top shadow on #list, making it look like one shadow going around the group. While this works, the part where the shadows meet has a weird clippy-looking effect. So this method works, but it doesn't look good. Link to answer describing solution.

  2. Use a spread equal to the negative of the blur and then use 3 shadows, one for each side of #list. Good in theory, but in practice the shadows on the sides now don't go along the full length. Link to answer describing solution. Here's a jsfiddle of me trying it out.

  3. Use a :before or :after pseudo element to cover up the overlapping shadow. This works extremely well for similarly-colored boxes, but my ul and div have content in them that can't afford to be covered! Link to answer describing solution

I'm left in a bit of a jam, as I would really like a shadow around #box and #list together, but can't seem to find a solution that works for my particular case. Any suggestions would be extremely helpful!

Note: I'm actually using the Electron framework, so the solution must work on Chrome, but it only has to work on Chrome!

Solution

  • You can use css-filter:

    #box {
  filter: drop-shadow(0 0 5px black)
}