Coloring with CSS Filters

On occasion you may need to recolor an image, asset-hosted SVG, or other element without modifying that original asset.

CSS Filters can be used for this purpose, by forcing the image to black, and the using a series of filters to adjust from black to a target color.

Note this may not work on image types that do not support transparency. You may need transparency in order to avoid making the entire image black.

How Filter-Coloring Works

CSS filters are applied using the filter property. The most common filters include:

• grayscale(): Converts the image to grayscale.
• sepia(): Applies a sepia tone to the image.
• brightness(): Adjusts the brightness of the image.
• contrast(): Adjusts the contrast of the image.
• saturate(): Increases or decreases the saturation of the image.

As each of these is applied it adjusts the way the image is presented. In the right combination we can effectively create any solid color we want.

The Basic Process

Our end goal is;

• To force the image to black for consistency, using CSS filters.
• To specify our specific color, using CSS filters.
• To accommodate Webflow's styling UX, which creates new filters at the top of the list.

The process to achieve this efficiently is a bit convoluted, but the end result is solid.

Create a global class for your filter-color styling

Create a global class for your color, e.g. g-filtercolor-blue . This will allow you to easily filter-color anything later.

Add this class to any element. An image element is best.

Determine the filter settings you need for your color

Get your target color's HEX, e.g. #00a4d6

Use a tool like this Codepen;

https://codepen.io/sosuke/pen/Pjoqqp

Get the filter settings you'll need e.g.;

invert(52%) sepia(93%) saturate(3733%) hue-rotate(164deg) brightness(99%) contrast(102%);

Set the filter settings on your class

Each filter must be added individually, and ordering matters.

Since Webflow adds the filters to the top of the list, we're going to add them in reverse order to save ourselves a lot of drag and drop reordering effort.

In the example above, the filters would be created in this order;

• contrast - 102%
• brightness - 99%
• hue-rotate - 164deg
• saturate - 3733%
• sepia - 93%
• invert - 52%

Now we want to ensure that the original image is black so that the above filters result in our desired color. That means adding two more filters ( which will be applied first );

• saturate - 100%
• brightness - 0%

While this will generally create a near-perfect color match, it will not always generate a perfect color match.

References

https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element/53336754#53336754

https://www.w3.org/TR/SVG/propidx.html

Understanding CSS Filters

CSS filters are applied using the filter property. The most common filters include:

• grayscale(): Converts the image to grayscale.
• sepia(): Applies a sepia tone to the image.
• brightness(): Adjusts the brightness of the image.
• contrast(): Adjusts the contrast of the image.
• saturate(): Increases or decreases the saturation of the image.