How to Change Image Color in CSS

1. Use the filter Property to Change the Image Color in CSS
2. Use the opacity() and drop-shadow() Functions in the filter Property to Change the Image Color in CSS

This article will introduce a few methods to change the image color in CSS.

Use the filter Property to Change the Image Color in CSS

The filter property sets the overlay of an image in CSS.

We can apply visual and graphical effects in an image using the filter property. For example, we can blur an image, change the contrast and brightness, apply a shadow effect, saturation, greyscale, and opacity with the filter property.

There are varieties of options that we can apply to the images with the filter property. The syntax of the filter property is shown below.

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

We can use the % values to set the above options. The lower value will have less effect on the image and vice versa.

We can also use the decimal value instead of the percentage value. For example, we can write 0.8 for 80%.

Now, let’s look at the examples of the different filters.

For example, insert an image with the URL https://loremflickr.com/320/240 six times using the img tag and set the classes brightness, blur, saturate, grayscale, and contrast to the img tag, as shown in the example below. In CSS, select the img tag and set the width to 25% and the float property to left.

Next, select the brightness class and use the filter property to set the brightness to 1.25. Similarly, select the respective classes and set blur to 2px, saturate to 300%, grayscale to 200%, and contrast to 60% according to the class.

Here, the first image is the original image, and the rest contain the filters. Thus, we can use the filter property to change the image color in CSS.

Example Code:

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

Use the opacity() and drop-shadow() Functions in the filter Property to Change the Image Color in CSS

We can change the image color in CSS by combining the opacity() and drop-shadow() functions in the filter property. We can provide the color of the shadow from the drop-shadow function, and we can set the shadow as thin as possible so that the image’s color will only change without forming an actual shadow.

The opacity will give a more visible color to the picture. We can specify the horizontal shadow, vertical shadow, blur radius, spread value, and the color with the drop-shadow function.

For example, insert an HTML image, select the img tag in CSS, and apply the filter property to it. In the filter property, set the opacity as 0.4. Next, set the value 0 0 0 red as the parameter of the drop-shadow function.

Here, we set the value 0 for the horizontal and vertical shadows. As a result, a shadow lies directly behind the image.

The 0 value of the blur will also make the image sharper on edge. However, the red color will be applied to the shadow, and the image will be reddish.

In this way, we can combine the opacity() and drop-shadow() functions in the filter property to change the image color in CSS.

Example Code:

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}