How to add a shadow on clip-path with CSS

0

You can create polygons with CSS alone without using technology such as canvas.
There are many sites that use clip-path polygon to cut photos diagonally.
This time, I will explain how it is possible to add a shadow to the “clip-path”.

box-shadow can’t not use with “clip-path” together

The first is a failure example. You may think that you can simply specify box-shadow for the clip-path element. However, due to the nature of clip-path, the shadow part is just cut.

Sample

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 shadow to clip-path

You can add a shadow by creating an element that wraps the clip-path and using the filter.

Sample

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));
}

 
It takes a little effort, but I was able to add a shadow.
clip-path is convenient, isn’t it? This time I tried to make a hexagon, but you can make various shapes.
Also, there are many situations where filter can be used. I would like to delve into both of them if I have the opportunity.

LINEで送る