First published in the public account “Front-end Full stack Developer”, the first time to read the latest articles, will give priority to two days to publish new articles. After concern private letter reply: gift package, send some network high-quality video course network disk information, can save a lot of money for you!

If you’re familiar with CSS, you probably know the box-shadow property. But did you know there’s a CSS filter called drop-Shadow that can do something similar? Just like box-shadow, we can enter values for x-offset, y-offset, blur radius, and color.

.my-element {
  filter: drop-shadow(0 0.2 rem 0.25 rem rgba(0.0.0.0.2));
}
Copy the code

Unlike box-shadow, it does not require the spread argument (more on that later).

Why is drop-shadow useful?

If we have box-shadow, why do we need drop-shadow?

Non-rectangular shape

Using drop-shadow allows us to add a shadow to an element that does not correspond to its bounding box, but uses the Alpha mask of the element. For example, we can add a projection to a transparent PNG or SVG logo.

img {
  filter: drop-shadow(0.35 rem 0.35 rem 0.4 rem rgba(0.0.0.0.5));
}
Copy the code

We can compare the effects of box-shadow and drop-shadow:

Using box-shadow gives us a rectangular shadow, even if the element has no background, while drop-shadow creates shadows for opaque parts of the image.

Demo

This will work whether the image is inline in HTML (as inline SVG, or in a < IMG > tag) or CSS background image, which means we can also add shadows to the gradient background. These shapes are created using a background gradient with a drop-shadow filter applied:

<div class="grad"></div>
<div class="grad"></div>
<div class="grad"></div>
Copy the code
.grad {
  width: 15rem;
  height: 15rem;
  margin: 1rem;
  background: linear-gradient(45deg, deeppink 50%, transparent 50%);
  filter: drop-shadow(0.6 rem 0.6 rem 1rem rgba(20.20.180.0.8));
}

.grad:nth-child(2) {
  background: radial-gradient(circle at center, deeppink 50%, transparent 50%);
}

.grad:nth-child(3) {
  background: linear-gradient(45deg, transparent 60%, deeppink 60%), linear-gradient(135deg, transparent 60%, deeppink 60%);
}
Copy the code

The effect

The cutting element

If we clip or mask elements using clip-path or mask-image, any box-shadow we add will also be clipped — so it won’t be visible if it’s outside the clipped area.

But we can create a shadow on the clipped element by applying a drop-shadow filter on the element’s parent element. Pretty cool!

parent-element {
	filter: drop-shadow(0.35 rem 0.35 rem 0.4 rem rgba(0.0.0.0.5));
}

.clipped-element {
	clip-path: polygon(0 0.50% 0.100% 50%.50% 100%.0 100%.50% 50%))}Copy the code

A drop-shadow filter is applied to the parent element of the clipped shape.

To view the demo

Grouping element

Sometimes I need to build components made up of overlapping elements, which itself requires casting shadows.

If we added box-shadow to the entire component, we would be left with an odd blank area:

If we add a separate box-shadow to each element, each element will cast its own shadow, which may not be what we want. We need to use some clever CSS to hide the overlapping shadows of those elements.

But by using drop-shadow across the entire component, we can get the shadows exactly where we want them, without resorting to gimmicky wizardry.

To view the demo

Multicast shadow

It’s a funny thing: you can use multiple shadows to get some cool effects! Check out the demo below.

<div class="parent-element">
  <div class="clipped-element"></div>
</div>
Copy the code
.parent-element {
  filter: drop-shadow(10rem 0 0 rgba(0.30.200.0.8)) drop-shadow(-10rem 0 0 rgba(0.30.200.0.8)) drop-shadow(20rem 0 0 rgba(0.30.200.0.8)) drop-shadow(-20rem 0 0 rgba(0.30.200.0.8));
  transition: filter 600ms;
}

.parent-element:hover {
  filter: drop-shadow(0 0 0 rgba(0.30.200.0.8));
}

.clipped-element {
  width: 20rem;
  height: 20rem;
  margin: 0 auto;
  background-color: deeppink;
  clip-path: polygon(0 0.50% 0.100% 50%.50% 100%.0 100%.50% 50%)}Copy the code

Effect:

Caveat: Transitions and animations CSS filters don’t perform particularly well, and in real projects it’s probably best not to animate so many filters at once. But this is just for fun!

limitations

As mentioned above, drop-shadow does not contain the spread parameter. This means we can’t currently use it to create contour effects, which I think would be very useful. For example, if it is supported, we can use drop-shadow to create a silhouette on the gradient background, just like we use box-shadow or text-shadow on other elements.

trap

Even given the same parameters, drop-shadow cannot render exactly the same shadow as box-shadow. I suspect this has something to do with CSS filters being based on SVG filter primitives. In either case, you may need to adjust the drop-shadow value slightly to compensate for the difference.

Browser support

All modern browsers support CSS filters (including drop-shadow). I prefer this as an incremental enhancement without needing to work around older browsers because it usually doesn’t have any significant impact on the user experience. But if you do need to provide alternative styles for older browsers, you can do so using feature queries and box-shadow fallbacks.

.my-element > * {
  box-shadow: 0 0.2 rem 0.25 rem rgba(0.0.0.0.2);
}

@supports (filter: drop-shadow(0 0.2 rem 0.25 rem rgba(0.0.0.0.2))) {
  .my-element {
    filter: drop-shadow(0 0.2 rem 0.25 rem rgba(0.0.0.0.2));
  }

  .my-element > * {
    box-shadow: none; }}Copy the code

conclusion

Despite good support, drop-shadow filters are still underutilized. I hope this article highlights some situations where box-shadow is used, and maybe you can use it in your next project!