For my new website, I wanted to feather edges in an image (fade the sides to transparent). I searched a lot but couldn't find any way to do it. ffmpeg feather edges, css feather edges, gimp feather edges. Nothing. I was defeated.
Then I was browsing Neocities casually and found this: https://cyberstheb.neocities.org/perona (a). A godsend, that was it, that was exactly what I was searching for!
It took me a while to learn how to do masks, so today, I'm going to teach you how to make fades and feather edges with GIMP and the mask CSS property.
GIMP
First create a new image. I created one the same size as my gif that will be transparented.
Then, paint the whole thing black with the paint bucket tool. It's important that it be black or else it won't work (I don't know why).
Now, we add the alpha channel with Layer -> Transparency -> Add Alpha Channel and we need to create a mask with Layer -> Mask -> Add Layer Mask, select White and Add
Select the mask in the layer view (It's most probably white).
Select the Gradient tool, click on the image and drag a little, it should create a gradient.
You can tweak the gradient the way you want, changing the Shape or making a custom gradient.
Then Export to your site's folder.
You can also find gradients online if you want, or make some more complex ones with the mask (like ellipses)
CSS
The MDN Web Docs covers all mask properties
Simply put, you can add mask: url("/your/url.png") alpha; and it will fade to transparent
