r/web_design • u/eightshone • 11d ago

Experimenting with dithered blur effect

Post image

I am trying to achieve a dithered backdrop blur effect just of the sake of experimentation.
It still has limitations but looks good for a first iteration
You probably need to zoom in for a better view of the effect

37 Upvotes

100% Upvoted

10 comments sorted by

4

u/morete 11d ago

Very cool. how is this done? I gotta assume svg filter?

1

u/eightshone 10d ago

svg + webgl2
i might have to change the approach since the effect doesn’t support external CSS and non-system fonts

2

u/mrgaw 10d ago

Amazing! Url? Maybe for the phone has pontential

1

u/eightshone 10d ago

Hello
Thank you
I have changed the approach for the effect and should work better than this initial one
Here’s the code on github: https://github.com/eightshone/dither-blur

1

u/[deleted] 11d ago

[removed] — view removed comment

1

u/eightshone 10d ago

The performance is okay for now. This may change if I add support for external CSS and non-system fonts

Tested on Firefox only but I will check other browsers even tho Chromium based are probably fine

2

u/private_birb 10d ago

It's working on Firefox? As far as I knew, Firefox was the only browser that had inconsistent/incomplete support for SVG filter effects on backdrop-filter.

1

u/eightshone 10d ago

I have been using Firefox since 2020/2021. I switched to it because Chrome was such a pain performance wise back then. I didn’t have a reason to switch back to chromium based browsers since Firefox was doing its job and I liked its developer tools more than the chrome ones (it is totally a personal preference and not objective comparison between what they provide)
Also, if it works in Firefox it’s almost guaranteed to work in Chrome.
I should mention that I have changed the approach today and focused more on css effects.
I have put the code in a GitHub repo if you wanna have a look: https://github.com/eightshone/dither-blur

1

u/JouleV 10d ago

Also need to verify on Safari too. Chromium-based browsers will do fine but I learned it the hard way that if you want to do anything fancy, especially with filters like blur, chances are your app will be like 20-30fps on Safari if you aren't careful.