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. Resolution 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)) ; } Related Posts Thanks to Chris Coyier for his excellent post on this subject: - https:/