This text was up to date on 13 August 2020 to incorporate further reference materials.
For those who’re accustomed to CSS, you in all probability know all concerning the box-shadow property. However do you know there’s a CSS filter, drop-shadow, that does one thing related? Like box-shadow, we are able to go in values for x-offset, y-offset, blur radius and color:
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}Not like box-shadow, it doesn’t take a unfold parameter (extra on that later).
Why is drop-shadow helpful?
If now we have box-shadow, why do we want drop-shadow in any respect?
Non-rectangular shapes
Utilizing drop-shadow permits us so as to add a shadow to a component that doesn’t correspond to its bounding field, however as a substitute makes use of the factor’s alpha masks. We may add a drop shadow to a clear PNG or SVG brand, as an illustration.
img {
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}We are able to evaluate the impact of box-shadow versus drop-shadow:
Utilizing box-shadow offers us an oblong shadow, despite the fact that the factor has no background, whereas drop-shadow creates a shadow of the non-transparent components of the picture.
It will work whether or not the picture is inline within the HTML (both as an inline SVG, or in <img> tag), or a CSS background picture. Which means we may additionally add a shadow to a gradient background. These shapes are created with background gradients, with the drop-shadow filter utilized:
Clipped parts
If we clip or masks a component utilizing clip-path or mask-image, any box-shadow we add will probably be clipped too – so will probably be invisible if it’s outdoors of the clipped space.
However we are able to create a drop shadow on the clipped factor by making use of the drop-shadow filter on the factor’s father or mother. Fairly cool!
.parent-element {
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}.clipped-element {
clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, , 50% 50%))
}
Grouped parts
Occasionally I’ve wanted to construct parts made up of overlapping parts, which itself must solid a shadow.
If we add a box-shadow to the entire element, we’ll be left with unusual empty areas:
If we add a box-shadow to every factor individually, then each will solid its personal shadow, which could not be the specified impact. We’d have to make use of some intelligent CSS to cover these shadows the place parts overlap.
However by utilizing drop-shadow on the entire element, we get the shadow precisely the place we would like it, with out resorting to hacks:
A number of drop shadows
Right here’s a enjoyable factor: You should use a number of drop shadows for some fairly cool results! Try the next demo.
(Facet observe: transitioning and animating CSS filters isn’t significantly performant, and it’s in all probability greatest to keep away from animating this many filters without delay in actual tasks. This one’s only for enjoyable although!)
Limitations
As talked about above, drop-shadow doesn’t embrace the unfold parameter. This implies we are able to’t at present use it to create a top level view impact, which I believe could be actually helpful. For instance, if it was supported, we may use drop-shadow to create a top level view on a gradient background, in the way in which we are able to with box-shadow on different parts.
Gotchas
drop-shadow doesn’t render the very same shadow impact as box-shadow, even when given the identical parameters. box-shadow tends to offer a darker, heavier shadow than drop-shadow when the identical values are used. I believe that is one thing to do with CSS filters being primarily based on SVG filter primitives. Regardless of the case, you’ll seemingly have to compensate for the distinction by adjusting your drop-shadow values considerably.
Browser help
CSS filters (together with drop-shadow) are supported in all trendy browsers. I have a tendency to make use of it as progressive enhancement, with out the necessity for a workaround for older browsers, because it isn’t usually one thing that may have an effect on the person expertise in any important approach. However should you do want to supply various styling for older browsers, you may accomplish that utilizing a characteristic question, with a box-shadow fallback:
.my-element > * {
box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}@helps (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
.my-element > * {
box-shadow: none;
}
}
Conclusion
Regardless of having glorious help, the drop-shadow filter is extremely under-utilised. I hope this text highlights some circumstances the place it may prevent hacking round with box-shadow – possibly you may use it in your subsequent challenge!
