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:
If you want this to show within the Designer, just paste it into an HTML Embed element — but if you don’t mind it showing up while your working you should include it (as well as any other style code) within the tag