CSS how do you blend the bottom of an image into a background?

Question

Hello I am trying to get the effect that I have done in photoshop, but get the same result as photoshop but using only css.

http://jsfiddle.net/10b2d5qg/

div {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

img {
  width: 400px;
  height: 200px;
  padding: 10px;
}

p {
  color: white;
}

<div>
  <p>
    Unphotoshopped image
  </p>
  <img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
  <p>
    Wanted effect
  </p>
  <img src="https://i.imgur.com/TAZ8DIM.png" />
</div>

score 2 · Accepted Answer · answered Sep 14 '22 at 16:21

2

You can accomplish this with the mask-image CSS properity and a linear-gradient, i.e.:

.thumbnail {
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 80%, transparent);
}

answered Sep 14 '22 at 16:21

Lachlan McDonald

2,195
2
21
25

This is what I was looking for. After googling for a bit I didn't see mask-image coming up as a css property to use. Thanks! Will accept when the timer for accepting runs out – Alex Mortez Sep 14 '22 at 16:23

score 0 · Answer 2 · answered Sep 14 '22 at 16:22

You can use mask-image & -webkit-mask-image with linear-gradient

div {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

img {
  width: 400px;
  height: 200px;
  padding:10px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}


p {
  color: white;
}

<div>
  <p>
    Unphotoshopped image
  </p>
  <img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg"/>

  
</div>

CSS how do you blend the bottom of an image into a background?

2 Answers2