Use CSS to Remove PNG Image Background Color

yasminsardar

Yasmin Sardar

Posted on June 9, 2024

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;}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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;
      }
Enter fullscreen mode Exit fullscreen mode

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:

Before Image:

After 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/

đź’– đź’Ş đź™… đźš©
yasminsardar
Yasmin Sardar

Posted on June 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related