Is there any way to create glossy finish effects?

How to do some sort of Gaussian blur effect as a layer on top of the image to give this sort of glossy effects. Is that effect applied to the image or inside web development there is a way to achieve it?

Viking Axe landing page https://dribbble.com/shots/14748077-Viking-Axe-landing-page![image|690x448](upload://3GktTzamjQONZGeY7gT1dQA8UOq.jpeg)

I would think using an image edit app will work best for this. But I can’t answer if it can or can’t be done in Bloc as I don’t honestly know. But I would use an image editor for this personally. I do for all my images. Sorry if this is not useful.

I didn‘t try this but maybe you can reach this result with the possibilities of the classes in blocs 4. transparency, boxshadow and the blur effect.

1 Like

Interesting, if anyone can try and know how to achieve it please share here.

Hello @hkiyany
For this example:
backdrop-filter: blur(10px);

If you want to apply reversed:
filter: blur(10px);

Hope it gives you right directions…

1 Like

I have no idea how to apply this but thanks @Pealco
Maybe I should place this as class to bg image?

@Pealco is this to be applied to image or bg image?


I just tried but I didn’t see anything changed.

Hi @hkiyany

You will need to add the blur filter to the page header as CSS in Blocs 3.

1 Like