How to Add a Shadow to `clip-path` in CSS

You can create polygons and other shapes using only CSS, without needing technologies like canvas.

We're increasingly seeing many websites that use `clip-path`'s `polygon` function to diagonally cut images.

This time, I'll explain how to add a shadow to a `clip-path`.

BOX-SHADOW DOESN'T ADD A SHADOW

Let's start with a failed attempt. You might think it's as simple as applying `box-shadow` to a `clip-path` element. However, due to the nature of `clip-path`, the shadow itself gets clipped.

Example

CODE

// html
<div class="clip-path-hexagon box-shadow" style="width: 200px;height: 173px;background-color: #00CC99;">
</div>

// CSS
.box-shadow {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.clip-path-hexagon {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

HOW TO ADD A SHADOW TO CLIP-PATH

You can add a shadow by creating a wrapper element for your `clip-path` and applying a `filter`.

Example

CODE

// html
<div class="clip-path-shadow">
    <div class="clip-path-hexagon" style="width: 200px; height: 173px; background-color: #00cc99;"></div>
</div>

// CSS
.clip-path-hexagon {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.clip-path-shadow {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}

`clip-path` is quite useful, isn't it? This time, I created a hexagon, but you can create a wide variety of shapes.

Additionally, `filter` can be used in many situations. If I get the chance, I'd like to explore both of these in more detail.

RECOMMENDED BOOKS FOR CSS/SASS

For CSS and SCSS, once you grasp the fundamentals, it's often quicker to consult Google. Understanding the core mechanics of CSS and how to use SASS is generally sufficient.

The Complete HTML & CSS and Web Design Introduction Course in One Book