Chapter 21: SVG Drop Shadow 1

1. What is a Drop Shadow in SVG?

A drop shadow is a soft, dark, offset “shadow” underneath or behind a shape/text/icon — it makes things look like they are lifted off the page (3D/depth effect), exactly like box-shadow or filter: drop-shadow() in CSS.

In SVG we create it using a <filter> with these steps:

1. Take the shape’s outline (alpha channel)
2. Blur it (Gaussian blur)
3. Move it down-right (offset)
4. Color it dark + semi-transparent
5. Put it behind the original shape

2. The Classic “Drop Shadow 1” Method (Long Version – Most Detailed Control)

This is the traditional way — uses <feGaussianBlur>, <feOffset>, <feFlood>, <feComposite>, and <feMerge>.

Copy-paste this complete example right now:

What you see:

• Red rounded rectangle with soft black shadow offset 10px down-right
• Text inside also gets the shadow (because it’s inside the filtered rect)

Why this is called “Drop Shadow 1” or classic:

• It was the only reliable way before <feDropShadow> became widely supported
• Gives full control over every step
• Works perfectly in all browsers (even older ones)

3. Breakdown – Each Primitive Explained Like Blackboard

1. <feGaussianBlur in=”SourceAlpha” stdDeviation=”8″ result=”blur”/> → Blurs only the transparency mask (alpha) of the shape → creates soft edge shadow base
2. <feOffset in=”blur” dx=”10″ dy=”10″ result=”offsetBlur”/> → Shifts the blur 10px right (dx) and 10px down (dy) → this is the “drop” part
3. <feFlood flood-color=”#000000″ flood-opacity=”0.5″ result=”shadowColor”/> → Creates a solid color layer (black 50% opacity)
4. <feComposite operator=”in” in=”shadowColor” in2=”offsetBlur”/> → Keeps color only where the blurred offset exists (like clipping)
5. <feMerge> → Puts shadow layer first, then original shape (SourceGraphic) on top

4. Quick Comparison: Classic vs Modern <feDropShadow>

Modern short way (2020+ browsers – cleaner & faster):

→ Same result as the long version above, but one line!

When to use which?

• Use classic long method if:
  • You need to support very old browsers
  • You want to do advanced tricks (e.g., different color per channel, inner shadow variation)
  • You see it in legacy code/tutorials
• Use <feDropShadow> if:
  • Modern project (Chrome/Edge/Firefox/Safari 2026)
  • Want clean, readable code
  • Faster performance

5. More Fun Variations (Try Changing These!)

A. Softer / Bigger Shadow

B. Colored Shadow (Purple Shadow)

C. Shadow Only on Text (Neon + Shadow Combo)

D. Inner Shadow (Reverse Offset)

Change dx=”-8″ dy=”-8″ and adjust blur → looks like pressed button / inset

6. Teacher’s Quick Tips 😄

• Always set x=”-50%” y=”-50%” width=”200%” height=”200%” on <filter> → prevents clipping when shadow goes outside shape
• flood-opacity=”0.3–0.6″ = natural shadow (too dark = ugly)
• Combine with blur on text/icons → modern UI looks (neumorphism, glassmorphism)
• Common mistake: Forget in=”SourceAlpha” → blurs whole shape including fill color
• Animation idea: Animate stdDeviation or dx/dy → floating / depth effect

Understood SVG Drop Shadow (classic method) now? This is the foundation almost every SVG shadow tutorial starts with.

Tell me what you want next:

• Animated drop shadow (hover lift effect)?
• Inner shadow version?
• Shadow on imported photo / <image>?
• Multiple shadows (hard + soft)?
• Or move to glow / outline glow next?

Just say — we can build any shadow style together! 🚀