How Can I Add a Drop Shadow to an SVG Using CSS?

Is It Possible to Apply a Drop Shadow to SVG Using CSS

CSS can be used to apply various effects to elements on a web page, including drop shadows. However, the box-shadow property is not directly supported for SVG elements.

To achieve a drop shadow effect for SVG, you can use the CSS filter property. This property is supported by modern browsers, including webkit browsers, Firefox 34 , and Edge. There is also a polyfill available that provides support for Firefox versions below 34 and IE6 .

Here's how to use the filter property to add a drop shadow to an SVG:

.shadow {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

You can use this filter on various SVG elements, such as rect, circle, and path. For example:

<svg>
  <rect class="shadow" x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

This will create a rectangle with a drop shadow. You can adjust the shadow's position, blur, and color by modifying the values in the drop-shadow function.

The above is the detailed content of How Can I Add a Drop Shadow to an SVG Using CSS?. For more information, please follow other related articles on the PHP Chinese website!