Tools › CSS Filter for SVG

CSS filter for
recoloring SVG icons

Enter any HEX color — get a ready CSS filter to recolor SVG icons and images right in your browser, without a code editor.

Target color
Preview
fill
info
star
check
On different backgrounds:
CSS Filter
Usage example
Filter value only

Why you need this

SVG icons often have a fixed black color. To recolor them via CSS without editing the SVG file, the filter property is used with a combination of invert, sepia, saturate, hue-rotate and brightness functions.

How the algorithm works

The tool uses a binary search method to find the optimal CSS filter combination. The algorithm tries thousands of variants and selects the one where the resulting color is closest to the target.

Limitations

CSS filter only works for elements with an original black color (#000000). If the icon is a different color — first add invert(1) or set it to black via fill in CSS. Accuracy is usually ±5 RGB units.

FAQ
What elements does CSS filter work with?
CSS filter for recoloring works with any HTML elements — img, svg, div. Especially useful for recoloring SVG icons loaded via img tag, when you can't change fill directly.
Why must the icon be black originally?
The filter algorithm works from black as the zero point. If the icon is white — add invert(1) to the beginning of the filter. If another color — it's better to change fill in the SVG itself.
How accurate is the result?
Accuracy is usually ±3-8 units per RGB channel. For most tasks this is sufficient — the difference is barely noticeable on screen. The accuracy card shows how close the result is.
Is this tool free?
Yes, completely free with no limits. No registration required, everything runs in your browser.