Blurring DIV edges!

Design help General
1

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

2

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%);
}

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:

2 Likes
3

Awesome! Thank you for the quick response!