SimonLeCat SimonLeCat - 6 months ago 79
CSS Question

Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?

Let's say I have this clip path (a triangle generated here)

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Is it possible to create a box-shadow from this clip path?
Something like this:

box-shadow: 20px 25px 50px -25px #000;


I'm assuming you mean, is it possible to create the shadow along the polygon. If so, then no. box-shadow is unfortunately only a "box", so it can't follow the clip path. It'd still apply to the rectangle of the element itself.

You could however pair it with another element that has the same clipping, but is set below it and offset and create a pseudo-shadow:

#box {
  position: relative;
  width: 200px;
  height: 200px;

#content {
  width: 100%;
  height: 100%;
  background: #3CF;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);

#shadow {
  position: absolute;
  z-index: -1;
  content: "";
  background: rgba(0, 0, 0, .5);
  width: 200px;
  height: 200px;
  left: 5px;
  top: 5px;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
<div id="box">
  <div id="content"></div>
  <div id="shadow"></div>

Depending on your use-case, with some clever use of a background image, multiple borders, and/or gradients, you could make the background look between with a fading shadow and what not.