-2

How can I fade in borders of an image in canvas (webgl).

Here is an example of what I would like to achieve:

enter image description here

Initially I was trying to use canvas filtering filter: blur(8px) however it blurs the entire image. But I want to have only blurred edges of the shape.

slowloris
  • 17
  • 3

1 Answers1

1

You can use CSS masking to do that.

First create a blurred white and black image, where the white is opaque and the black fully transparent. Then use it in the mask CSS attribute like this:

img {
  mask: url(my-mask.jpg);
}

Here is a working example: https://codepen.io/tolokoban/full/xxyXaKR

We used a SVG instead of a bitmap image to create the mask, but that's the same technique in the end.

Tolokoban
  • 2,297
  • 14
  • 17