How Can I Create an SVG Drop Shadow Using CSS3?

SVG Drop Shadow Using CSS3

Implementing Drop Shadow with CSS3

It's possible to add a drop shadow effect to SVG elements using CSS3. Contrary to previous box-shadow or -webkit-box-shadow properties, the modern approach involves utilizing the CSS filter property.

Using the CSS Filter Property

Supported by popular browsers like webkit, Firefox 34 , and Edge, the CSS filter property provides a dedicated syntax for drop shadow effects:

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

Applying the Drop Shadow Effect

Apply the filter property to your SVG element with the ".shadow" class:

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

The drop shadow effect will be applied to any SVG element with the ".shadow" class, including images, shapes, and groups. The shadow's appearance can be customized by adjusting the values within the filter function.

Cross-Browser Compatibility

While the filter property alone provides excellent support, you may need a polyfill for older browsers like FF < 34 or IE6 . Polyfills can mimic the filter effect's behavior, ensuring compatibility across a wider range of browsers.

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