Question 49406 in Photoshop Question posted in
The official user guide can be found here.

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

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/

enter image description here

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>
Tags:

2

Answers


  1. 0

    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);
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search