Convert image into mask

I have a green background picture with some shadows. I would like to use it as a mask so I can place it on background with any color (e.g. red or pink) and get the same style of shadows.

I tried converting it to grayscale and changing opacity to 20%, but this resulted in a lot darker image.

I am using this on a webpage where admin can set template color. Then I am using something like this in CSS:

background: #557d0d url("img/background.png") center center;

enter image description here

Using Gimp 2.8.6 on Ubuntu.


You can desaturate the image with Colors > Desaturate.... Next, use Colors > Color to Alpha... to eliminate the gray which makes it darker (#808080).

Set opacity to 40% and it should do.

I just did a small test with a website I created:
enter image description here

Source : Link , Question Author : Tomas Greif , Answer Author : Community

Leave a Comment