Two ways to blur content with CSS

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[nomadshiba]

its a good practice to add backdrop-filter to an absolute element that is covering the background and don't let it have any children
backdrop-filter is sometimes rarely unstable when element has children with some styles applied to it, it breaks stuff, based on my experience.

so something like should be done:
.my-box {
position: relative;
isolation: isolate;
}
.my-box::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: rgb(255 255 255 / .25);
backdrop-filter: blur(10px)
}

[megatronskneecap]

This guy is the rightfully crowned CSS king. I make websites for a hobby and have never heard of half of this stuff until now!

[mmoplayah]

This is the reason why i love your contents Kevin. I keep learning more and more. I am a front-end developer and I am implementing new methods to my projects!

[bobross]

I was stumped by this exact problem 2 days ago when trying to use filter. Gonna go try this out right now, thanks!

[dzisonline]

I've always wanted backdrop filter. Thanks for sharing.

[blackpurple]

Great features, both can be used for various purposes

[estonian]

i learned from that more than some "lectures" tq

[ajzack]

I swear i just had this problem and boom algorithm with Kevin powell filters 💥

[clydehawkins]

Wish I knew this sooner. Back in school I would always get around this with rgba values.

[lifealliancegroup]

Thanks Kev', as always great content, super valuable share!!!

[JustBezelReacts]

Thanks bro ...this was helpful..I was wondering for a while now on how to make backgrounds blurry

[alman_harbi]

Sometimes the backdrop filter doesn't work on child elements, it was reported as a bug about a year ago but still no fix

[louicoder]

Learning alot of stuff from your videos

[astrixwr]

Muchas gracias
Justo estaba practicando el uso de filter en mis páginas

[PerpetualWarr]

Good stuff, Kevin ;) I learned this the other day, with your help. Appreciated ;)

[darrellparkhouse]

Thank you for this video it was really informative

[FalconiZzare]

The thing is firefox doesn't have backdrop support.

[mehdigrn]

Always usefull and practical content, thank you so much.

[SamuelHalder]

How to blur part of the content for non-logged-in users and remove blur for logged-in users?

[cheese]

The backdrop filter is not a function on my css only filter