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:
<style>
.YOUR-CLASS {
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
}
</style>
The 10% in the two lines above controls how “blurry” the edge is — with a lower number decreasing the blurriness and a higher number increasing it 
Awesome! Thank you for the quick response!
Where do I paste this? In the Before tag?
Thanks in advance 
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