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

Linear gradient across an image with transparency in CSS – Photoshop

I’ve got a simple .PNG image, with a white shape and a transparent background. This is being created in .js.

    var img = document.createElement("img");
    img.src = "Images/seed.png";
    img.classList.add("seed");
    document.getElementById("spiralDiv").appendChild(img);

I would like to add a linear gradient to this shape, changing the opacity of the shape. I have tried using the normal background: linear-gradient(rgba ... method, but this gives the transparent background of the image a linear gradient as well, and I just want the gradient to apply to the shape only. Perhaps using a mask will help?

Change color of PNG image via CSS? was helpful to change just the color of the shape, but I am not sure how to get it working with a gradient.

I can’t just draw the shape with a gradient in the photoshop, as I would also like to alter the direction of the gradient within the javascript at runtime.

Seed image with black background

Seed image with transparency

Desired outcome

(Sorry can’t post images yet)

Tags:

2

Answers


  1. 0

    from your linked image, a possibility could be a mix of filter and mix-blend-mode:

    possible example :

    div {
  background: linear-gradient(to bottom left, #ff730f, #ff730f, #ffc69f, white) red;
  width: max-content;
}
div + div {background:linear-gradient(to   left, orange,gray,purple,gold,green,tomato,blue)}
img {
  display: block;
  mix-blend-mode: screen;
  filter: invert(100%);
}
body {display:flex}
    <div><img src="https://i.imgur.com/8GlLI4B.png"></div>

<div><img src="https://i.imgur.com/8GlLI4B.png"></div>
    Login or Signup to reply.
  2. 0

    Use the image as a mask then you can add background as coloration:

    .box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}

img {
  display: block;
  width: 100%;
  opacity:0; /* no need to show the original image, it will simply define the size */
}

body {
  background: grey;
}
    <div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

    More simplified code in case you know the ratio of your image:

    .box {
  display: inline-block;
  width: 200px;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background: grey;
}
    <div class="box"></div>

    Also like this if you want the image to remain visible:

    .box {
  display: inline-block;
  width: 200px;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,transparent,orange);
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}
    <div class="box"><img src="https://i.ibb.co/PNtkhqg/iii.png"></div>

    And with the ratio trick

    .box {
  display: inline-block;
  width: 200px;
  background:
   linear-gradient(45deg,transparent,orange),
   url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
  -webkit-mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/PNtkhqg/iii.png) center/contain no-repeat;
}
.box::after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
img {
  display: block;
  width: 100%;
}

body {
  background: grey;
}
    <div class="box"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search