Blurring DIV edges!

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:
image
And the Read-only: CLICKY

1 Like

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 :+1:

3 Likes

Awesome! Thank you for the quick response!

Where do I paste this? In the Before tag?
Thanks in advance :slight_smile:

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 :+1:

lovely, thank you! :slight_smile: