Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create an SVG Drop Shadow?
A drop shadow enhances the appearance of an SVG by giving it a 3D effect or a sense of depth. SVG drop shadows can be created using SVG filters and the CSS filter property.
- SVG Filters: Provides fine-grained control over shadow properties.
- CSS filter: Applies shadows using simpler syntax.
Syntax
For SVG filters
<filter>
<feDropShadow dx="x-offset" dy="y-offset" stdDeviation="blur" flood-color="color" />
</filter>
For CSS filter
filter: drop-shadow(x-offset y-offset blur color);
Method 1: Using the <filter> Element in SVG
This approach allows for detailed control over shadow effects, including blur, offsets, and color adjustments. SVG filters define graphical effects applied to elements, and the <feDropShadow> filter primitive simplifies creating drop shadows.
Example
The following example creates a green circle with a drop shadow using SVG filters
<!DOCTYPE html>
<html>
<head>
<title>SVG Drop Shadow with Filter</title>
</head>
<body>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" x="0" y="0" width="200%" height="200%">
<feDropShadow dx="5" dy="5" stdDeviation="4"
flood-color="black" flood-opacity="0.5" />
</filter>
</defs>
<circle cx="70" cy="70" r="40" fill="#4CAF50"
filter="url(#dropShadow)" />
</svg>
</body>
</html>
A green circle with a subtle black drop shadow offset 5px to the right and down appears on the page.
Method 2: Using CSS Filter
You can apply CSS filter: drop-shadow to SVG elements. The CSS filter property is simpler than using SVG filters and is applied directly via CSS.
Example
The following example applies a drop shadow using the CSS filter property
<!DOCTYPE html>
<html>
<head>
<title>SVG Drop Shadow with CSS</title>
<style>
.shadow-circle {
filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="70" r="40" fill="#4CAF50" class="shadow-circle" />
</svg>
</body>
</html>
A green circle with a black drop shadow offset 5px to the right and down appears on the page.
Key Differences
| Method | Control | Complexity | Browser Support |
|---|---|---|---|
| SVG Filter | Fine-grained | Higher | Excellent |
| CSS Filter | Basic | Lower | Modern browsers |
Conclusion
SVG drop shadows can be created using either SVG filters for precise control or CSS filters for simplicity. Choose SVG filters for complex effects and CSS filters for basic shadows with less code.
650 Views
