Placing a gradient background on an image with transparent background

May 10, 2022

What I would like to achieve is basically have a gradient appear on the text as opposed to the background of an image. I have created an example here:
https://codepen.io/BenSagiStuff/pen/BaYKbNj

body{
  background: black;
}

img{
  padding: 30px;
  background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
}

<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png" >

As you can see, currently the background of the image has the gradient, but, what I would like is for the text "Google" to have the gradient and the background of the png should stay as black.

Ultimately the goal would be to have the gradient transition underneath the image as well, so the gradient slides horizontally under the image as well.

>Solution :

Use the image as a mask on a common element

body{
  background: black;
}

.box{
  --img:url(https://upload.wikimedia.org/wikipedia/commons/9/95/Transparent_google_logo_2015.png);
  
  width:300px;
  aspect-ratio:3;
  background: linear-gradient(to right, #E50000 8%, #FF8D00 28%, #FFEE00 49%, #008121 65%, #004CFF 81%, #760188  100%);
  -webkit-mask: var(--img) 50%/cover;
          mask: var(--img) 50%/cover;
}