Sometimes, we want to add an SVG drop shadow using CSS.
In this article, we’ll look at how to add an SVG drop shadow using CSS.
How to add an SVG drop shadow using CSS?
To add an SVG drop shadow using CSS, we canm use the filter CSS property.
For instance, we write
<svg class="shadow" ...>
<rect x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>
to add a SVG rectangle.
TYhen we write
.shadow {
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
to apply the filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); style to the svg to add a drop shadow.
The first argument of drop-shadow is the x offset.
The 2nd argument is the y offset.
The 3rd argument is the blur radius.
And the last argument is the color.
Conclusion
To add an SVG drop shadow using CSS, we canm use the filter CSS property.
