Streaming live at 10am (PST)

🆘 Gaussian blur SVG doesnt work properly in Firefox (and other browsers?)

Hey,

For a project im using SVG’s that i blur to get a nice gradient effect. I loaded them in as an image asset so i can load them up with the page. The SVG’s have no blurring in their code. I blur them with the Webflow CSS stylesheet, adding the gaussian blur.

Here you can see the different results, 1st is Firefox, 2nd is Chrome:


My question, how do i fix this so that the gaussian blur is consistent on all devices while still using blurred SVG’s?

Appreciate the help :)!

Kind regards,

Morris

Each browser is going to handle the graphics involved with rendering a blur differently. So I would expect some visual differences. Blurs are a big are a big drag on performance. You might be better off with an image.

Aah, Jeah I used the SVG’s to try to minimise the file size. Didn’t know blurring makes it more heavy, will try that.

Thanks :)!

It does not increase the file size, just has a performance hit on devices. My GTX3090 won’t see it but not everyone is on a hot rig. Use Squoosh to optimize your file. Wont need much to get it small.

Thanks Jeff,

I’ll look into it ;)!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.