How to create transparent gradient blur around transparent blurred div?

HTML-CSS
1

Hey everyone :wave: :smile:

I have an div element that is transparent but blurs everything behind it, through a combination of backdrop-filter: blur() and rgba(255, 255, 255, 0). You can see an example in this JSFiddle, the code of which is replicated below. Most of this code is from the MDN Docs page for backdrop-filter, with small modifications by myself.

HTML:

<div class="container">
  <div class="box">
  </div>
</div>

CSS:

.box {
  background-color: rgb(255 255 255 / 0%);
  backdrop-filter: blur(10px);
  width: 300px;
  height: 100px;
}

body {
  background-image: url("https://i.pinimg.com/736x/ec/d8/34/ecd834e40fc5bbd91f3156a2f1823fca.jpg");
  background-size: cover;
}

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

Iā€™d like to make it so that the blurring effect, instead of ending sharply at the border lines of the div, fades out in a gradient (kind of like using a box-shadow with a blur property, but the shadow is invisible and the blur affects whateverā€™s behind it instead).

How can I achieve this effect?

Iā€™ve looked around for a solution, but I havenā€™t been able to find anyone asking the same question or a way to apply a backdrop-filter directly to a shadow. The only workaround I can think of is creating several transparent divs around the main one, with incrementally increasing sizes and decreasing backdrop-filter: blur() values, to create the illusion of a blur gradient, but that seems quite ā€œhackyā€ and Iā€™d like to avoid it if there is at all a ā€œcleanerā€ method.

Thank you!

1 Like
2

Hereā€™s a solution:
Instead of

backdrop-filter: blur(10px);

Use

backdrop-filter: blur(0);
filter: blur(10px);

Let me know if this is what you had in mind.

3

Unfortunately not. It seems to make no difference at all.

4

Is this what you mean? Iā€™ve forked a fiddle for you to make sure you applied it.

5

Yeah, this is how I applied your answer. It seems to produce the exact same result as my original JSFiddle code.

6

Hmmm, there is a difference. On the original one the div borders end abruptly. On mine the borders fade out. See the screenshots below:

The original one:

Screenshot 2024-11-12 at 14.29.25
Screenshot 2024-11-12 at 14.29.251436Ɨ604 83.8 KB

My revised version:

Screenshot 2024-11-12 at 14.29.39
Screenshot 2024-11-12 at 14.29.391400Ɨ572 77.5 KB

7

Thatā€™s strange. I can clearly see the difference in the screenshots you provided, but I canā€™t see the difference on my end. Hereā€™s what I see:

Original:

Original
Original891Ɨ379 178 KB

Your version:

Edited
Edited891Ɨ377 177 KB

Is this difference a result of a difference in the browsers weā€™re using or something? Iā€™m on Chrome.

8

Ahh, Iā€™m using Safari. Before we move on though, is that the effect you were looking for?

9

Here, Iā€™ve put it in CodePen. Maybe JSFiddle is playing tricks with us. Does this one work for you?

10

It is, yeah. Any idea how I can fix the issue on my end? This is all for a website, so I would need it to work on most/all popular browsers.

filter and backdrop-filter are both fully compatible with both Chrome and Safari (at least on PNGs, as opposed to SVGs), so I donā€™t see where the issue is coming from. Hereā€™s the compatibility data from MDN:

backdrop-filter:

backdrop-filter Compatibility
backdrop-filter Compatibility782Ɨ309 16.7 KB

filter:

filter Compatibility
filter Compatibility778Ɨ405 22.5 KB

11

Yes, I looked that up too. Hmm, Iā€™m not sure. Iā€™m hoping itā€™s a temporary bug. Did you check my Pen? Maybe itā€™s a JSFiddle issue.

12

I just checked the Pen, and this keeps getting weirder. It looks different, but not in the way it appeared in your screenshot (which is the way I want it to look). Hereā€™s some screenshots:

My view of your JSFiddle:

Edited
Edited891Ɨ377 177 KB

My view of your CodePen:

CodePen
CodePen1207Ɨ390 178 KB

The CodePen version seems less blurred, but the border is just as sharp.

@hbar1st @lasjorg Sorry to ping you, but youā€™ve both been very helpful in the past. Do you have any idea why this is all happening? (Long story short: @nickrgā€™s solution seems to work on their end but not mine, and also looks different when I view it on JSFiddle vs. CodePen.)

1 Like
13

I see what you mean. Iā€™m sorry, I have to go now, but Iā€™ll be back later and try to figure it out. My deepest apologies!

14

No worries, Iā€™m very grateful for your help. Take care! :v: :heart:

15

Hey, Iā€™m back. Iā€™ve gone through your code and fixed a few things. You donā€™t really have any errors, just some double selectors and so on. Iā€™ve redone the page as properly as I know how. Let me know if it works for you now:

One thing I also noticed was you forgot the ā€œaā€ on the rgba color declaration. Maybe this was causing the issue. It seems like it might - thatā€™s what determines the transparency of the div and is exactly what the backdrop filter affects. Itā€™s corrected now. Please let me know if it works for you.

By the way, I think those two screenshots you last shared with me, with the strange blur difference, is actually no difference at all. I think it just seems so because the background is a lot larger on the CodePen version.

Hope that helps.

16

Thanks. I copied most of it from the MDN documentation page as a quick example, so I didnā€™t put much effort into it.

I normally use rgba() the way you did, like rgba(255,255,255,0) but in the code I copied from MDN, they made it rgb(255 255 255 / 30%), which seemed to work, so I didnā€™t bother to change it (except by changing 30% to 0%.)

Unfortunately, the change you made doesnā€™t seem to have changed anything on my end. I checked the new CodePen, and the border still looks sharp on my end.

That might be the reason behind the difference, but Iā€™m honestly not sure.

I appreciate your help my man, but donā€™t dedicate too much time to this if youā€™re busy. Iā€™ll either cheese it through several divs or just not implement it, I guess.

17

Alright, I see. No, itā€™s fine, I like solving problems like this. What Iā€™m going to do is try to find another way to achieve the same effect and see if it works on your browser. Just one question: does your blurry div have to be transparent, or are you planning on making it a certain color?

18

I would need it to be transparent. The purpose is for it to blur whatever is behind it, regardless of what that is.

19

Got it. Working on it. I might not be able to come up with something, but Iā€™ll try. As you say, thereā€™s always a dirty solution if nothing else works.

1 Like
20

Alright. Thanks a lot dude, I really appreciate it! :heart:

1 Like