How to blur an image without custom code

Community resources Webflow Tips
1

Hi everyone,

Thought i’d share a really simple trick on how to blur an image without using custom code.

Video Tutorial:
http://quick.as/o3e0slWyy

Read-Only link:
https://preview.webflow.com/preview/simpleblur?preview=58f653d5a390527b7fc9e497968d9100

I know it’s not the most savvy way to do it and if you do a lot of these on one page it might get laggy, but for 1 image it wont hurt :smile:.

Michael

6 Likes
2

That’s really clever! My only concern is that you are then loading 2 potentially large images instead of one. I wonder if there was a way to also incorporate the blurred version, which will be smaller, so that it shows up while the clear image is loading on the page.

1 Like
4

CSS does have the ability for gaussian blurs ( filter: blur(10px); ), but I’m not sure how you would use that in Webflow.

5

Blur transitions are still buggy in Chrome though, from 0px blur to 1px blur.

6

I’ve tried using css styles to blur an image, and that works, but it doesn’t cover the whole image. The image won’t get blurred on the sides of the image, that’s how blur works. I haven’t found a solution how to fix this but i did come up with this nifty little trick to do it without code :relaxed:

1 Like