Change color of PNG image via CSS?

html

css-filters

image-manipulation

responsive-design

byAnton Shumikhin·Feb 1, 2025

To change a PNG image's color using CSS, combine a container's background-color with the image's mix-blend-mode. Often, multiply blend mode offers the best outcome.

.image-container {
   background-color: blue; /* You can carry any color of your wish here */
}

img {
   mix-blend-mode: multiply; /* Spreading magic by overlaying the color */
}

<div class="image-container">
   <img src="your-image.png" alt="">
</div>

This approach takes advantage of PNG transparency, allowing the background-color to fill only the image content. Your png images now have a brand new look with just few lines of code!

Understanding CSS filters for dynamic image manipulation

Let's dive deeper into transforming the color of PNG images using CSS filters. The filter property in CSS offers a powerful set of methods to visually enhance and manipulate images on the fly.

How to: Basic filter effects

CSS filters consist of functions that transform the visual output of HTML elements. With a single line of code, you can completely revamp your png images.

img {
   filter: grayscale(100%); /* Turns your image into an old B&W film */
}
img {
   filter: sepia(100%); /* Gives it that "vintage" social media look */
}
img {
   filter: saturate(200%); /* Makes colors pop out like a 3D movie */
}
img {
   filter: hue-rotate(90deg); /* Because who said cats can't be purple? */
}

More on hue-rotate

Among the basic filters, hue-rotate deserves a special mention due to its ability to dynamically shift all color values of an image. Pairing this with additional filters like invert can yield surprising results.

img {
   filter: invert(75%) hue-rotate(90deg) saturate(3); 
   /* First we go negative, then we turn things around! */
}

Going beyond: Advanced filter effects

Coloring shadows with drop-shadow

Apart from color transformations, CSS filters can also create impressive shadow effects. The drop-shadow function is particularly amazing, which helps highlight image elements:

img {
   filter: drop-shadow(2px 2px 5px blue); /* Hello shadow, you're all decked up! */
}

Comparing Font Awesome and SVGs

If icon customization is your need, check out Font Awesome icons which are scalable and CSS customizable. But, SVGs offer superior flexibility, especially for working with vector graphics. Inline SVGs provide more control for dynamic updates:

<svg>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

explain-codes / Html / Change color of PNG image via CSS?

Linked

How to darken a background using CSS?



How to calculate required hue-rotate to generate specific colour?



How to modify the fill color of an SVG image when being served as background image?



Invert CSS font-color depending on background-color



Rotate an image in image source in HTML



Flip / mirror an image horizontally + vertically with CSS



Making text background transparent but not text itself



Understanding CSS filters for dynamic image manipulation Going beyond: Advanced filter effects