How to create transparent gradient blur around transparent blurred div?

HTML-CSS
21

I have spent all two hours trying to find a solution, but it seems like you’ll have to cheese it through several divs, my friend. I’ve downloaded Chrome to test my solutions but all of them failed. It seems like Chrome has a different way of rendering CSS blurring on transparent divs.

I’ve tried setting the background to colors with very low opacity (alpha values) to trick the browser into blurring the div, but no success there. As much opacity as there was, that’s how blur there was, which, in this case, was practically invisible. Then I tried using pseudo elements, but it was the same. I tried radial gradient hacks, clip-path to get the extra blur to show, tried overflow properties and even made an attempt with an svg filter and a gaussian blur, but to no avail. They all end abruptly on the border, or simply don’t work at all on transparent backgrounds. Even ChatGPT admitted there were no solutions, lol. (I hate using GPT for coding, and I was right: I had much better and more solutions than it made up!)

So, I’d suggest you hack it with div stacking, although, to be honest, I’m not sure how that’s going to work either. Maybe tweak the design of your page a bit. Instead of transparency, maybe a color would work? Because Chrome blurs colored divs beautifully, without rigid edges. Or you’ll have to put up with the rigid edges of the blur. I really couldn’t find a solution, I’m really sorry. I thought I’d inform you quickly before you waste too much time on it yourself. I’m quite certain there is no simple CSS solution that works on Chrome too. Maybe with some complicated JS you could somehow taper off the edges with decreasing opacity, but that sounds like a nightmare to code, if you know what I mean.

Anyway, that’s my update. Did you find any solutions?

1 Like
22

Hi @ShadyHBedda

I combined the .box class for the following result.
Something like that?

image
image476×551 72.2 KB

Happy coding

1 Like
23

Unfortunately that doesn’t work, since it uses a grey background color instead of a transparent one, whereas the effect I’m trying to achieve is of a div with blurred edges that is completely transparent but blurs what’s behind it, and the blurring decreases around the edges because the (invisible) edges are themselves blurred.

Using your solution but changing the background color to transparent unfortunately doesn’t work either. I appreciate you trying to help though. Thanks!

24

Holy shit, Nick. You tried everything. If none of that worked, I figure I’ll just change the visual design such that what I’m doing simply no longer requires this effect.

I appreciate your great efforts my man. Thanks a lot!

1 Like
25

You’re welcome. If I ever randomly stumble across a solution sometime, I’ll be sure to let you know. I kind of feel bad we have to accept defeat, lol! But that’s programming for you. I guess this article explaining how HTML and CSS was never actually meant to be used for wide-spread web design is our only source of consolation for our failed efforts:

And if, when you finish your project, you’d like to post it up on our Code Feedback subform, please tag me - I’d love to see the final result.

All the best and good luck!

26

Hi there @ShadyHBedda !

To create the blurred edges effect on your .box while keeping the div fully transparent, you can use a mask-image with a radial gradient.

Code 
    .box {
      width: 300px;
      height: 100px;
      padding: 20px 40px;
      border-radius: 5px;
      font-family: sans-serif;
      text-align: center;
      background-color: rgb(255 255 255 / 0%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      mask-image: radial-gradient(circle, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
1 Like
27

I was going to suggest using a mask with a gradient as well.

But I’m not sure how easy it is to create the proper falloff for both the vertical and horizontal. An SVG for the mask might be better (using transparency or luminosity).

You could use a radial gradient, but then the box becomes a circle or ellipse (vignette). You could just set the top and bottom (two linear-gradient) and leave the side with a hard edge, that looks pretty nice as well.

1 Like