Apply a box shadow to a clip path element - CSS

In this post, I describe how you can apply a box shadow (or drop shadow) to an element which also has the clip-path style.

Issue

If you add the box-shadow style to an element with clip-path, the shadow does not appear:

You can deduce the clip-path style is the reason by toggling this style on and off.

To add a drop shadow to an element which also has the clip-path style, simply wrap that element in another element:

<div class=”hexagon-wrapper”>
<div class=”hexagon”>Hexagon</div>
</div>

Then apply a drop-shadow filter to that parent element:

.hexagon-wrapper {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
}

To apply multiple shadows, you can add more drop-shadow filters:

.hexagon-wrapper {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)) drop-shadow(-1px 0 3px rgba(0, 0, 0, 1));
}