CodeFryDev

SVG CSS Color Filter Generator

Color any <img src="...svg"> using CSS filter. Pick a hex color, preview instantly, and copy production-ready CSS.

Color filter tool

The problem: You cannot use fill or color on an SVG loaded via an <img> tag — the browser treats it as an external raster-like asset.

The solution: Force the icon to black with brightness(0) saturate(100%), then apply a calculated combination of invert, sepia, saturate, hue-rotate, brightness, and contrast to match your target color.

Sample icon
Enter a 3 or 6 digit hex color code with optional hash prefix
Original source
Original black SVG icon before CSS filtering
Colored via CSS
SVG icon recolored using generated CSS filter

Generated CSS

Apply this filter property to your <img> element or CSS class.

.colored-icon { filter: brightness(0) saturate(100%); }

How it works

  1. 1

    Start with black SVG

    Use a black icon in an <img> tag, or let the base filter force it to black.

  2. 2

    Choose your color

    Pick from the color wheel or paste any hex value you need.

  3. 3

    Preview live

    See the before and after side by side before adding CSS to your project.

  4. 4

    Copy & ship

    One click copies the full filter string — paste it into your stylesheet.

Frequently asked questions

Why can't I use fill on an SVG in an <img> tag?
External SVGs loaded via <img> are opaque to DOM styling. CSS filters work on the rendered pixels, making them the most practical approach without inlining the SVG or using masks.
Does my SVG need to be black?
The solver assumes a black starting point. The generated CSS always includes brightness(0) saturate(100%) first, so colored source icons are normalized automatically.
Is my data uploaded anywhere?
No. All computation runs in your browser. Icons and colors never leave your device.
How accurate is the color match?
The tool uses a SPSA optimization solver to minimize color distance. Most hex colors match closely; extreme pastels or near-whites may have slight variance.