How to Change Image Color in CSS

Combining the opacity() and drop-shadow() functions in the filter property will change the color of an image in CSS. Filter property can be used to apply various effects to an image, such as reflections, grayscale, sepia, shadows, and more. These functions use different color components to modify the image’s color. In this manual, you will acquire knowledge of how to use CSS to change the color of an image.

Here are the outcomes of this article:

• filter Property
• drop-shadow()
• opacity()

Let’s start!

Change Image Color in CSS

To change the color of the image in CSS, first learn about the filter property and its functions. You will gain a better understanding this way.

filter CSS Property

To control the visual effect of an image filter property of CSS is used. Visual effects are:

• blur
• brightness
• color adjustment
• drop-shadow
• opacity

Syntax of filter Property

The syntax of the filter property is:

• blur(): used to apply blur effect on the image.
• drop-shadow(): create a shadow over an image.
• opacity(): used to add transparency to the image.

We can use multiple filters using this filter property. This article is about how to change the color of the image, so here we will explain how to use the drop-shadow(), and opacity() functions with it.

drop-shadow()

drop-shadow() is a built-in function of CSS that allows setting shadow to any element or image. The following parameters are used in the drop-shadow() function to change the color of an image:

• offset-x: It is used to add horizontal shadow.
• offset-y: Shadows are added vertically using this.
• color: Shadows are colored with this parameter.

To clarify these points, let’s move to the syntax of drop-shadow:

• offset-x and offset-y can be positive or negative.
• In horizontal, positive value is used to add the effects on the right side, and negative is for the left side.
• In vertical, the positive value is for the bottom side, and the negative is for the top.
• In the place of color, you can assign any color you want to give to the image.

opacity()

opacity() is used to add transparency to an element or any image. The syntax of the opacity() is:

Here “number” is used to set the opacity level between 0.0 to 1.0. To make an image fully transparent, you can set it as 0.0.

To clarify above mention points, let’s move to the example.

How to Change Image Color in CSS?

In the below example, first, we will add an image using <img> tag:

Before applying the filter property, the outcome was like this:

To change the color of an image, let’s move to the CSS and apply the filter property to it. We will set the opacity to 0.5 for the transparency of the image. In the drop-shadow() function, the value of offset-x and offset-y is 0 because we only want to change the color of an image.

Here is the final result after the implementation:

The color of the image has been changed successfully.

Conclusion

To modify the color of an image, two CSS functions: opacity() and drop-shadow() are used with the filter property. opacity() specifies the transparency of the image and drop-shadow() assigns color and shadow to the image. This write-up explained the method of changing the color of an image using CSS.