Privacy & storage

We use necessary browser storage for language, login persistence and editor flow. Recently used fonts and symbols are only stored if you allow convenience storage.

No marketing tracking and no advertising cookies.

SVG Filters and Effects: Shadows, Blur, and More

Advanced SVG techniques for impressive graphics

SVG & Vector Graphics

SVG filters enable effects that normally require image editing software — directly in the browser, scalable and performant. From blurs to shadows to color manipulations.

Generated graphic for article SVG Filters and Effects: Shadows, Blur, and More

How SVG Filters Work

Filters are defined in a <defs> block and applied to elements via filter="url(#id)":

<defs>
  <filter id="shadow">
    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3" />
  </filter>
</defs>
<text filter="url(#shadow)">Logo</text>

The Most Important Filter Primitives

  • feGaussianBlur — Gaussian blur
  • feDropShadow — Drop shadow
  • feColorMatrix — Color manipulation (grayscale, saturation, hue rotation)
  • feBlend — Blend two graphics (multiply, screen, etc.)
  • feComposite — Boolean operations (in, out, atop, xor)
  • feMorphology — Erode/dilate (make thinner/thicker)
  • feTurbulence — Noise and organic textures

Practical Examples for Logos

Subtle shadow: Gives the logo depth on light backgrounds.

Glow effect: feGaussianBlur + feMerge for a luminous shine.

Emboss effect: feMorphology + feComposite for an engraved look.

Performance Considerations

SVG filters can be resource-intensive:

  • Avoid large stdDeviation values (blur radius)
  • Set filterUnits and primitiveUnits intentionally
  • Limit the filter region with x, y, width, height
  • Test on mobile devices

SVG filters open creative possibilities directly in the browser. Use them sparingly and deliberately — they can make your logo stand out from the crowd. Start with the logo editor.

Ready to create your logo?

Free visual editor with SVG export.

Related Articles