CODEWITHSUNDEEP
cssfilter
learningtech
learningtech

Reputation: 33715

CSS filter that can make colors appear more "rich"?

Someone sent this to me and I'm sure he created in photoshop.

enter image description here

What I want to do is create a similar red scale colour effect using only HTML CSS. So what I did was take an image, use CSS to gray-scale it, adjust contrast, and then I put a div with red background and opacity less than 1 on top of the image. Here's the code and the result.

#container  {
position:relative;
width:450px;
}

img {
width:100%;
display:block;
filter: grayscale(100%) contrast(50%);
}

#overlay {
background-color: rgba(255, 0, 0, 0.5);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
<div id="container">
<img src="https://i.sstatic.net/0MYn1.jpg" />
<div id="overlay"></div>
</div>

I find that no matter what values I adjust for any of the style properties, I can't get the red image to appear as vibrant as the first image at the top. I tried different shades of red, opacity, contrast, etc..., but my image still appears very "washed out". Are there other CSS properties that can help me make the second image as vibrant as the first image?

Upvotes: 0

Views: 2951

Answers (1)

zgood
zgood

Reputation: 12581

You can use mix-blend-mode for your markup.

#container {
    background-color: rgba(255, 0, 0, 1);
    position: relative;
    width: 450px;
}

img {
    width: 100%;
    display: block;
    mix-blend-mode: multiply;
}
<div id="container">
    <img src="https://i.sstatic.net/0MYn1.jpg" />
</div>

I used a value of multiply but you can check out many other values here.

Although browser support is limited, you can usually get away with doing your first overlay method for IE users (they don't get cool effects because they don't have a cool browser lol)

There is also background-blend-mode if your image is a background image rather than a <img />

Upvotes: 4

Related Questions