CSS Filter Generator

Input your color and get filter from below

Generate Filters Real pixel, color applied through CSS background-color: Filtered pixel, color applied through CSS filter:

Note (If not worked) :

For this code to work well the starting color needs to be black. If your icon set isn’t black you can prepend “brightness(0) saturate(100%)” to your filter property which will first turn the icon set to black. Like this:

.icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7500%) hue-rotate(your-color-here);
}

Usage :

CSS filters are a powerful tool that allow you to apply visual effects to HTML elements, including images and icons. By using CSS filters, you can easily change the color of an icon without having to create multiple versions of the same icon in different colors. This makes it much easier to maintain your website or application, as you can simply adjust the CSS filter for the icon instead of having to create new images or icons every time you want to change the color.

Once you have your color code, you can use the following CSS code to change the color of your icon:

.icon {
  filter: invert(100%) sepia(100%) saturate(7500%) hue-rotate(your-color-here);
}

To use this code on your website or application, simply add the .icon class to the HTML element that contains your icon. For example, if your icon is an element, you would add the following code:

<img class="icon" src="your-image-here.png">

And that’s it! By using CSS filters, you can easily change the color of your icon without having to create multiple versions of the same icon in different colors. This saves time and effort, and makes it much easier to maintain your website or application.