Linear gradient across an image with transparency in CSS

Question

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)

I shared it with a black background, as a transparent background showes up as white on imgur. The black portion is the transparent area. Apologies — Scott Parker, Jun 20 '20 at 21:58
share it here and it will be kept transaprent even if it's white, we need the PNG to answer — Temani Afif, Jun 20 '20 at 21:58

score 2 · Answer 1 · answered Jun 20 '20 at 22:04

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>

Temani Afif · Accepted Answer · 2020-06-20T22:18:34.760

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>

Linear gradient across an image with transparency in CSS

2 Answers2