Chapter 21: SVG Drop Shadow 2
Drop Shadow 2 — the modern, simpler way using the single <feDropShadow> primitive.
This is the method most people recommend in 2025–2026 for new projects because it’s shorter, easier to read, and feels more like the CSS drop-shadow() function we already know. It’s part of the SVG 2 / Filters Level 1 spec and has been fully supported in all major browsers since around 2020 (Chrome 84+, Firefox 83+, Safari 14.1+, Edge 84+ — basically everyone for the last 5+ years).
I’m going to explain it like we’re upgrading our toolbox together — step by step, with clear examples you can copy-paste right now.
What is <feDropShadow>?
It’s a single filter primitive that does almost everything a drop shadow needs in one line:
- Takes the input (usually the shape’s alpha channel)
- Blurs it (Gaussian blur)
- Offsets it (shifts position)
- Colors it (with opacity)
- And places it behind the original graphic automatically
No need for separate blur, offset, flood, composite, or merge steps!
Core attributes of <feDropShadow>
| Attribute | What it does | Typical values | Default | Very important? |
|---|---|---|---|---|
| dx | Horizontal offset (right = positive) | number (e.g. 4, 8, -3) | 0 | ★★★★★ |
| dy | Vertical offset (down = positive) | number (e.g. 6, 4, -2) | 0 | ★★★★★ |
| stdDeviation | Blur amount (same as feGaussianBlur) | number or “x y” for directional | 0 | ★★★★★ |
| flood-color | Color of the shadow | #000, red, rgba(0,0,0,0.5), currentColor | black (#000000) | ★★★★☆ |
| flood-opacity | Opacity of the shadow (0–1) | 0.3, 0.5, 0.7 | 1 | ★★★★☆ |
| in | Input to shadow (usually SourceAlpha) | SourceAlpha, SourceGraphic | SourceGraphic | ★★★☆☆ |
| result | Name output if chaining more effects | “shadow”, “myDrop” | (auto) | ★★☆☆☆ |
Most common quick pattern (2025–2026 best practice):
|
0 1 2 3 4 5 6 7 8 |
<filter id="drop2"> <feDropShadow dx="4" dy="6" stdDeviation="4" flood-opacity="0.5"/> </filter> |
→ That’s it — one line does the whole shadow!
Example 1 – Basic modern drop shadow on a rectangle
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<svg width="340" height="200" style="border:1px solid #eee; background:#f9f9f9;"> <defs> <filter id="shadowModern" x="-50%" y="-50%" width="200%" height="200%"> <feDropShadow dx="6" dy="8" stdDeviation="5" flood-opacity="0.45"/> </filter> </defs> <rect x="60" y="60" width="220" height="100" rx="16" fill="#4CAF50" filter="url(#shadowModern)"/> <text x="170" y="115" font-size="42" text-anchor="middle" fill="white"> Modern Shadow </text> </svg> |
Result: Nice, soft, realistic drop shadow — code is much shorter than the classic version!
Example 2 – Colored shadow (very popular in UI design)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<svg width="300" height="180"> <defs> <filter id="coloredShadow"> <feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#FF5722" flood-opacity="0.6"/> </filter> </defs> <circle cx="150" cy="90" r="70" fill="#2196F3" filter="url(#coloredShadow)"/> <text x="150" y="100" font-size="48" text-anchor="middle" fill="white"> Orange Glow </text> </svg> |
→ Change flood-color to any color — purple, cyan, pink — instant branded shadows!
Example 3 – Subtle shadow on text (clean & modern look)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg width="420" height="160"> <defs> <filter id="textDrop"> <feDropShadow dx="2" dy="3" stdDeviation="2.5" flood-opacity="0.35"/> </filter> </defs> <text x="210" y="100" font-size="72" font-weight="bold" text-anchor="middle" fill="#673AB7" filter="url(#textDrop)"> Drop Shadow 2 </text> </svg> |
→ Very elegant, lightweight shadow — perfect for headings, buttons, cards.
Example 4 – Directional / asymmetric blur (still possible!)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<svg width="400" height="140"> <defs> <filter id="motionShadow"> <feDropShadow dx="12" dy="2" stdDeviation="8 3"/> <!-- stronger horizontal blur --> </filter> </defs> <rect x="40" y="40" width="320" height="80" rx="40" fill="#009688" filter="url(#motionShadow)"/> <text x="200" y="90" font-size="38" text-anchor="middle" fill="white"> Fake Motion Shadow </text> </svg> |
→ stdDeviation=”8 3″ → more blur horizontally than vertically.
Comparison: Drop Shadow 1 vs Drop Shadow 2 (2026 quick guide)
| Feature / Aspect | Classic (Drop Shadow 1) | Modern (Drop Shadow 2) |
|---|---|---|
| Code length | 8–12 lines | 1–3 lines |
| Readability | More steps to understand | Very clear & intuitive |
| Flexibility (chaining) | Easier to insert extra steps (color matrix, etc.) | Slightly less (but enough for 95% cases) |
| Browser support (2026) | Excellent (SVG 1.1 era) | Excellent (since 2020–2021) |
| Performance | Similar | Slightly better (fewer primitives) |
| When to choose | Need complex chaining or very old browser support | New code, simple shadows, modern projects |
Recommendation in 2026: Use <feDropShadow> for almost everything unless you need very advanced chaining or support extremely old environments.
Common beginner mistakes with <feDropShadow>
- Forget to expand filter region → shadow clipped → add x=”-50%” y=”-50%” width=”200%” height=”200%”
- No flood-opacity → shadow fully black & opaque (looks harsh)
- in=”SourceGraphic” instead of default → colors get blurred into shadow
- dx=0 dy=0 + high stdDeviation → looks like outer glow (which is actually useful!)
- Not testing in Safari → rare issues with certain color spaces (add color-interpolation-filters=”sRGB” if needed)
Mini practice challenges
- Give a pill-shaped button (rounded rect) a blue-tinted modern shadow
- Create text with a very subtle, small-offset shadow (dx=1 dy=2 stdDeviation=1.5 opacity=0.3)
- Make a circle with a strong colored shadow (e.g. red shadow on green circle)
Paste your code here if you want feedback — I’ll review it like we’re pair-programming 😄
Now you know both drop shadow methods! Which one feels more comfortable to you — the classic detailed one or the modern short one? Want to combine them, animate the shadow, or move to glow effects next? Just tell me — we’ll keep building! 🚀
