CODEWITHSUNDEEP
htmlcss
kb_
kb_

Reputation: 1335

CSS to turn image into black and white with no grays

I'm trying to convert logos to black and white, without any grays and have gotten this far, but can't get rid of the gradient effects. I'd like to make it purely black and white (where the mix-blend-mode: multiply ultimately gets rid of the white background):

.logo {
   width: 100px;
   height: 100px;
   filter: grayscale(1) contrast(1.5) brightness(1);
   mix-blend-mode: multiply;
}
<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

Upvotes: 1

Views: 8845

Answers (1)

Jake
Jake

Reputation: 1186

You can use contrast(100) to make it fully black and white. You can always tone it down a bit and use a lower setting such as contrast(10).

.logo {
   width: 100px;
   height: 100px;
   filter: grayscale(1) contrast(100) brightness(1);
   mix-blend-mode: multiply;
}
<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

Or, as @vals pointed out, you can use a slightly different filter to remove any gradient interference.

.logo {
   width: 100px;
   height: 100px;
   filter: saturate(150) grayscale(1) contrast(10);
   mix-blend-mode: multiply;
}
<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

Upvotes: 7

Related Questions