SVG Filter vs CSS Filter
Both SVG <filter> and CSS filter property create visual effects — but they work differently and have different capabilities and browser support.
Capability Comparison
SVG filters are more powerful; CSS filters are simpler to write.
| Effect | CSS filter | SVG <filter> |
|---|---|---|
| Blur | blur(5px) | feGaussianBlur |
| Drop shadow | drop-shadow(...) | feDropShadow |
| Brightness | brightness(1.5) | feComponentTransfer |
| Color matrix | ❌ Not available | feColorMatrix |
| Composite blend | ❌ Limited | feComposite + feBlend |
| Morphology | ❌ Not available | feMorphology (erode/dilate) |
| Turbulence/noise | ❌ Not available | feTurbulence + feDisplacementMap |
When to Use Each Approach
CSS filter is simpler; SVG filter is more powerful.
- Use CSS filter for: quick blur, brightness, contrast, drop-shadow on any HTML or SVG element
- Use SVG filter for: custom color matrices, duotone effects, glow effects, organic distortion
- CSS filter applies to entire elements including children
- SVG filter applies to the rendered result of the target element's paint
- Mix both: apply a CSS filter to an element that already has an SVG filter — they compose
Frequently Asked Questions
How do I create a duotone color effect with SVG filters?
Use feColorMatrix to desaturate (grayscale), then feComponentTransfer to map the grayscale values to two hue-shifted colors. This creates a duotone effect impossible with CSS filter alone.
Why does CSS filter: drop-shadow work better than box-shadow for SVG?
box-shadow adds shadow around the bounding box rectangle. filter: drop-shadow() calculates the shadow from the actual rendered alpha of the element, including transparent holes — perfect for SVG icons.
Can SVG filters be applied to HTML elements?
Yes — reference the SVG filter by ID in CSS: filter: url(#my-filter). The SVG containing the filter can be hidden (display:none or zero-size) and still be referenced by HTML elements on the page.
What's the performance difference between SVG and CSS filters?
CSS filter: composited on GPU — very performant. SVG filter with complex primitives (feTurbulence, feDisplacementMap): computed on CPU — can be expensive. Test performance with complex SVG filters before shipping.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free