Converting an Image to White in CSS

Converting an Image to White in CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

You can convert an image to white in CSS using the filter property. Below are the examples:

CSS Filter Property

The filter CSS property adds graphical effects to an element, such as blur or color shift. Filters are frequently used to alter the appearance of images, backgrounds, and borders.

Example: Converting an Image to White in CSS

Apply the following filter CSS to your image to convert it to white.

filter: brightness(0) invert(1);

Or assign a class to your image, for example, turn-white and use the following CSS:

.turn-white{
   filter: brightness(0) invert(1);
}