SVG Drop Shadow Filter

SVG Filters

SVG filters apply effects like blur and drop shadow. Define in <defs><filter> and apply with filter="url(#id)".

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="4" stdDeviation="3"
                    flood-color="rgba(0,0,0,0.35)"/>
    </filter>
  </defs>
  <rect x="30" y="20" width="140" height="80" rx="10"
        fill="steelblue" filter="url(#shadow)"/>
  <text x="100" y="67" text-anchor="middle" fill="white" font-size="16">Card</text>
</svg>

HTML

Full Editor

Pro Tip

SVG filters provide finer control than CSS box-shadow for complex effects.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned