SVG Grayscale Filter
feColorMatrix with a standard luminance matrix converts SVG content to grayscale without needing a separate desaturated asset.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Converting Colors to Grayscale with a Matrix
The feColorMatrix filter primitive applies a mathematical transformation to every pixel's color values, and using the standard luminance-weighted grayscale matrix values converts a colored SVG image or graphic to grayscale on the fly, avoiding the need to maintain a separately exported desaturated version of the same asset.
- feColorMatrix applies a mathematical transformation to every pixel's colors
- The standard luminance-weighted matrix produces an accurate grayscale conversion
- Avoids maintaining a separate desaturated asset alongside the color original
Practical Uses for Dynamic Grayscale Effects
This technique is popular for a hover effect that reveals color on an otherwise grayscale image gallery, a disabled-state styling for icon buttons, or a print stylesheet that forces grayscale rendering for cost-conscious printing, all achieved by toggling the filter's presence rather than swapping image files.
- Popular for color-reveal hover effects on grayscale image galleries
- Useful for disabled-state icon styling without a separate gray icon asset
- Can force grayscale printing in a print stylesheet by toggling the filter
Frequently Asked Questions
Is using CSS filter: grayscale() simpler than an SVG feColorMatrix?
For HTML elements, yes — CSS filter: grayscale() is simpler syntax for the same effect, while feColorMatrix is more relevant when the grayscale conversion needs to be part of an SVG filter chain combined with other SVG-specific effects.
Can I convert only part of an SVG to grayscale while keeping other elements in color?
Yes, since the filter attribute applies per-element, you can apply the grayscale filter to specific shapes or groups while leaving sibling elements unaffected and still in full color.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG