Chapter 22: SVG Drop Shadow 2
Drop Shadow 2
XML
|
0 1 2 3 4 5 6 |
<feDropShadow … /> |
This single primitive does almost everything the long method did, but in one single line. It’s exactly why most new SVG filter tutorials, CodePen examples, and professional code now use <feDropShadow> instead of the 5–6 step version.
1. Why “Drop Shadow 2” (Modern Method) is Better in 2026
- Much shorter code — one line vs 5–7 lines
- Easier to read & maintain
- Better performance in most browsers (optimized native primitive)
- Same visual quality (or even slightly better anti-aliasing in some cases)
- Supported everywhere modern (Chrome 77+, Firefox 70+, Safari 14.1+, Edge 79+ — basically all browsers people actually use in 2026)
So if you’re starting fresh or writing new code → this is the one you should use 95% of the time.
2. Basic Syntax of <feDropShadow>
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<filter id="shadow2"> <feDropShadow dx="…" <!-- horizontal offset (positive = right) --> dy="…" <!-- vertical offset (positive = down) --> stdDeviation="…" <!-- blur radius / softness --> flood-color="…" <!-- shadow color --> flood-opacity="…"<!-- shadow transparency 0–1 --> /> </filter> |
That’s it — one element!
3. Your First <feDropShadow> Example (Copy-Paste Right Now!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Drop Shadow 2 – Modern Method</title> </head> <body> <h1>Modern SVG Drop Shadow (Method 2 – feDropShadow)</h1> <svg width="500" height="300" viewBox="0 0 500 300" style="border:1px solid #eee; background:#f0f4f8;"> <defs> <filter id="modernShadow" x="-50%" y="-50%" width="200%" height="200%"> <feDropShadow dx="12" dy="12" stdDeviation="8" flood-color="#000000" flood-opacity="0.45" /> </filter> </defs> <rect x="100" y="80" width="300" height="140" rx="24" fill="#2ecc71" filter="url(#modernShadow)"/> <text x="250" y="170" font-size="52" text-anchor="middle" fill="white"> Modern Shadow </text> </svg> <p>Compare this code length with the classic 5-step version — much cleaner, right?</p> </body> </html> |
What you see:
- Green rounded rectangle with soft black shadow
- Offset 12 px right & down
- Blur radius 8 (nice soft edge)
- 45% opacity shadow
4. All Important Attributes of <feDropShadow>
| Attribute | Meaning | Default | Typical values | Notes |
|---|---|---|---|---|
| dx | Horizontal offset | 0 | 4, 8, 12, -6 (left) | Positive = right |
| dy | Vertical offset | 0 | 4, 8, 12, -6 (up) | Positive = down |
| stdDeviation | Blur amount (Gaussian radius) | 0 | 3–4 (subtle), 6–10 (normal), 12+ (strong) | Can be “8 3” (x/y different) |
| flood-color | Color of the shadow | black | #000, #333, #ff000080 (red 50%) | Can use rgba/hex with alpha |
| flood-opacity | Shadow transparency (0–1) | 1 | 0.3–0.6 (natural shadow) | Lower = softer / lighter |
| result | Name for chaining (rarely needed) | — | “myShadow” | Usually not needed here |
5. Quick Style Variations (Try Changing These!)
A. Subtle / Minimal Shadow (Clean UI look)
XML
|
0 1 2 3 4 5 6 |
<feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.25"/> |
B. Strong & Dramatic Shadow
XML
|
0 1 2 3 4 5 6 |
<feDropShadow dx="16" dy="16" stdDeviation="12" flood-color="#000" flood-opacity="0.6"/> |
C. Colored Shadow (Modern / Playful)
XML
|
0 1 2 3 4 5 6 |
<feDropShadow dx="8" dy="8" stdDeviation="10" flood-color="#8e44ad" flood-opacity="0.5"/> |
D. Floating / Lifted Look (Small offset + soft blur)
XML
|
0 1 2 3 4 5 6 |
<feDropShadow dx="2" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.35"/> |
E. Inner Shadow Style (Negative offset)
XML
|
0 1 2 3 4 5 6 |
<feDropShadow dx="-8" dy="-8" stdDeviation="10" flood-color="#000" flood-opacity="0.7"/> |
→ Looks like the shape is pressed into the page
6. Teacher’s Comparison Table (Exam/Interview Style)
| Feature | Classic Method (Drop Shadow 1) | Modern Method (Drop Shadow 2) |
|---|---|---|
| Code length | 5–7 lines | 1 line |
| Browser support (2026) | Excellent (very old browsers too) | Excellent (99%+ modern browsers) |
| Readability | A bit verbose | Very clean & self-explanatory |
| Flexibility | More (you control every step) | Less (but enough for 98% of cases) |
| Performance | Slightly slower (more primitives) | Slightly faster |
| Recommended for new code | Only if legacy support needed | Yes – this is the standard now |
7. Final Teacher Tips 😄
- Always add x=”-50%” y=”-50%” width=”200%” height=”200%” on the <filter> tag → prevents shadow clipping when it spreads outside the shape
- Use flood-opacity=”0.3–0.55″ — shadows that are too black look fake
- Combine with slight scale or translate on hover → “lift” effect (CSS + SVG filter)
- You can chain: filter=”url(#shadow) url(#blur)” — shadow + extra blur
- Common mistake: Forget to set flood-color or flood-opacity → invisible or full black shadow
Got SVG Drop Shadow 2 (the modern <feDropShadow> way) clear now? This is the method most designers and front-end developers use in 2026.
Tell me what you want next:
- Hover lift animation with shadow change?
- Multiple shadows (hard inner + soft outer)?
- Drop shadow on text only?
- Shadow on imported photo / <image> element?
- Or move to inner shadow, outline glow, or glass effect?
Just say — we keep building beautiful SVG effects together! 🚀
