Hey guys!
I’m looking to make a frosted glass effect, which I’ve been able to do using the Backdrop filter function.
Great stuff!
Except it makes the borders sharp.
I want to make the borders blurred too…
Can’t use inner box shadow for this either, because it’s supposed to be transparent, right.
And, I need it to be only on ONE side of the DIV.
Help?
Here’s the effect:
And the Read-only: CLICKY
You can achieve the effect with mask-image CSS property and a linear gradient.
Based on your screenshot, something like the code below should work — just change YOUR-CLASS to the class name of your div that’s using the backdrop-filter property: