Chapter 20: SVG Drop Shadow 1

Why “Drop Shadow 1”?

There are two main ways to make drop shadows in SVG in 2025–2026:

• Drop Shadow 1 (classic method) → Uses <feGaussianBlur> + <feOffset> + <feMerge> → More steps, but very explicit and works perfectly everywhere (even older browsers)
• Drop Shadow 2 (modern SVG 2 method) → Uses the single <feDropShadow> primitive → Shorter code, easier to read, but slightly less flexible in some edge cases

Today we’re mastering Drop Shadow 1 — the foundational technique.

Step-by-step logic of a classic drop shadow

A realistic drop shadow usually needs these layers:

1. Take the shape’s silhouette (alpha channel only)
2. Blur it softly (Gaussian blur) → this creates the soft edge of the shadow
3. Offset (shift) the blurred silhouette down and to the right (or any direction)
4. Color it (usually gray/black with some transparency)
5. Merge the shadow layer behind the original graphic

The Classic Drop Shadow Recipe (most common pattern)

Breaking down each part

• x=”-50%” y=”-50%” width=”200%” height=”200%” on <filter> → Very important! Prevents the shadow from being clipped when it extends outside the original bounding box.
• <feGaussianBlur in=”SourceAlpha” stdDeviation=”4″ result=”blur”/> → Blurs only the shape (not colors inside) → perfect for shadow base → stdDeviation=”4″ ≈ soft shadow (try 2 = hard, 8 = very soft)
• <feOffset in=”blur” dx=”6″ dy=”6″ result=”offsetBlur”/> → Shifts shadow right 6 units, down 6 units → Change dx/dy to move shadow direction (negative = left/up)
• <feFlood flood-color=”#000″ flood-opacity=”0.4″/> + <feComposite … operator=”in”/> → Colors the shadow black with 40% opacity → You can skip this and use flood-color directly in some cases, but this pattern is very safe
• <feMerge> → Puts shadow first (behind), then original graphic on top → Order matters — shadow must come before SourceGraphic

Example 2 – Simpler version (no explicit color flood – still very popular)

Many people skip the <feFlood> + <feComposite> and just let the blur carry the opacity:

→ Shadow is black by default (inherits from <feGaussianBlur> behavior on alpha)

Example 3 – Drop shadow on text (super common use case)

Quick tuning guide

Common beginner mistakes

• Forget to expand filter region → shadow cut off
• Use in=”SourceGraphic” instead of SourceAlpha → colors get blurred too (ugly)
• No <feMerge> → only shadow appears, original graphic disappears
• Small stdDeviation on huge shape → shadow looks too sharp
• No opacity control → shadow too dark/black

Mini practice tasks

1. Give a rounded rectangle a soft purple-tinted shadow (use flood-color)
2. Make text with a very subtle shadow (low opacity, small offset)
3. Create two circles: one with hard shadow, one with very soft/distant shadow

Paste your code here if you want feedback — I’ll review it like we’re pair-coding together 😄

This is the classic Drop Shadow 1 method — rock-solid and still used everywhere in 2026. Next lesson we can compare it directly to the modern <feDropShadow> (Drop Shadow 2) and see when to choose which.

Any part confusing? The merge step? Why SourceAlpha? Opacity control? Just tell me — we’ll redraw examples bigger/slower until it’s crystal clear! 🚀