Use CSS to Remove PNG Image Background Color

In CSS you can remove the white background color form your PNG image by using only one CSS property called mix-blend-mode. Below example:

 img { mix-blend-mode: multiply;}

If you want to remove white or background color from an image, this CSS property is perfect for you. Additionally, it works on all image types, not just PNG.

And if you also want to see some more properties of mix-blend-mode you can check it out on w3 school, there are a lot more properties that I haven't mentioned here.

Like you I also want to remove white background from my image, I use many CSS properties like background-color: transparent; else background-image: url('path/to/image.jpg'); and many more,

But nothing was working, so I searched on YouTube and found this method. It worked, so follow all the steps outlined below.

Step 1: Select image in CSS

The first step is to select the image in the CSS file, if your image is in a container then you select the main container of your image.

 .container {}

In the above example there is only container class inside the style sheet as you can see.

Step 2: Add this CSS property to image

After adding image in the CSS sheet now only add this CSS mix-blend-mode: multiply;

Here is an example:

 .container {
        mix-blend-mode: multiply;
      }

Once you add it is done, now your PNG has no background color.

Step 3: Save the file, and check preview

Once you follow both the above steps now save the HTML and CSS files and preview it on your browser below, I have shared the before and after picture which you can see

Before Image:

After Image:

I hope this post helps you to remove white background color form your PNG image using CSS codes.

You may also wants to know: https://newbiecoding.com/how-to-change-font-in-html-without-css-2/

Comments

[Jon Randy 🎖️]

This doesn't remove the background from the image at all. That isn't what the multiply blend method does. It merely gives the appearance of doing so when you use a black and white image. If you try with a coloured image, the colours will be ruined.

I would suggest checking the comments on the post below that explain this:

How to remove background of an image with CSS

Madhu Saini ・ Apr 3

#webdev #css #html #programming

[Yasmin Sardar]

If your image has a white or black background, this method will work effectively. However, it will not work with a different colored background.

[Jon Randy 🎖️]

If you have these two images (colourful background, and a foreground image with a white background):

And you use the multiply blend mode, you will end up with this:

[Jon Randy 🎖️]

It won't work if your image is coloured - regardless of the background. The colours will be messed up.