Backdrop Filter CSS Blur

Backdrop Filter CSS Tutorial
In this tutorial we will take a look at backdrop-filter a css property that allows you to do blurs similar to macos behind content. Backdrop filter gives you that glassy look where things are still visible, but unlike a blur which affects all your content, backdropfilter only affects the background, and you can select different colours to blur against.
If you do web development or website design, it's good to know what things are possible and cascading style sheet properties like this give you an extra edge in terms of website development.
#backdrop #filter #css
Follow and support me:
🐦 Twitter: / adrian_twarog
💬 Discord: / discord
💸 Patreon: / adriantwarog
🖥️ Dev.to: dev.to/adriantwarog

[@Coach_Habibi]

Thanks god for a dude going straight to the point and not extending a video for no reason.
Thanks a lot. Very helpful!

[@francescociulla]

Thanks Adrian, I am always stunned by the quality of your videos. 🔥

[@AdrianTwarog]

And I’m stunned by yours too! Keep up the great work!

[@waltwilliams6012]

Thank you! This gives me the effect I was looking for.

[@federicomarroquin4470]

New subscriber. I was stuck on this for a week. My HERO

[@hoshiya4522]

I saw you on Traversy Media. You have damn awesome content on your channel. How come I haven't found your channel! Very very underrated channel. Glad I found it.

[@AdrianTwarog]

That’s great to hear :)

[@festustemitope604]

I discovered your channel from Tradversy Media and kept asking myself why I haven't found out about you ever since! Thanks a bunch bro.

[@snowsol]

i do too

[@AdrianTwarog]

Festus Temitope that’s great mate!!!

[@aogunnaike]

Same here bro.. thanks to traversy media I'm so loving this channel, great accent too :)

[@DarylLegion]

finally a content of this. thank you. maybe a lot doesn’t know about this

[@zahir2494]

very useful man. and your...Inspirational!, thank you

[@legendarygaming7790]

Love this. thank you so much

[@EntertainmentTv312]

this video very helpful for me Thanks Adrian

[@savagemotiv]

Short and precise

[@mrtherapy309]

You are awesome bro. Thanks for this

[@Working800]

From dominican repubublic you have a new student, I like how you explain and this kind of stuff are really usefull.

[@priteshpatel1530]

wow, brother it's such a too helpfull thx for this.❤❤

[@anasraza4006]

Thanks for your help

[@snowsol]

*you're channel makes me Grow my skills!*

[@AdrianTwarog]

SnowSol that’s the goal :)

[@snowsol]

@@AdrianTwarog obviously

[@princeonukwili996]

Gee...thanks, gonna try this out in my next project😊

[@adriangonzalez3469]

Hi Adrian. My name Adrian too lol. Discovered you from Traversy Media channel. I am new to getting into Web Development. I like this filter you just demonstrated. Will be going over some of your other videos. Keep up the great work!

[@AdrianTwarog]

Adrian Gonzalez great to hear and cool to meet you!

[@bama2619]

Cool, thank you.

[@naylord5]

Thank you very much! This video was really helpful.
Quick question: it is possible to blur the edges of the rectangle too? I mean to have the appearance of a mist.

[@kevdev4]

just what i need bro

[@blessdarah1256]

Adrian from Austrailia. I love that line

[@shruts2907]

I liked this tutorial's short sweet and to the point. My Adhd didn't have time to kick on.

[@hajarelmajid6842]

Thanks!

[@nurullahanas4906]

Perfect

[@jargon8976]

bro u are very good...i look forward to be like u

[@abhishekchaudhary4058]

Thanks

[@manish-sharma]

Such a valuable content.... 🤟

[@AdrianTwarog]

Thanks!

[@arashmilani4611]

great , but this property not working in firefox

[@LucasGuillemette]

I hate that nobody wants to address this. I added a script on my website that turns on blur only on Chrome, and make background a solid color everywhere else.

[@user-kk9lz4tg4l]

thanks

[@gouravmisra7870]

Thank u sir love from india

[@AdrianTwarog]

Much appreciation

[@luiscantero4791]

Why backdrop-filter is not working to me?

[@vivekanandanv4934]

Y it doesn't work out in Dreamweaver?? I tried using html5 but the backdrop-filter doesn't works.. can you help it..

[@safasouli2527]

Firefox is not supported with the new feature backdrop-filter

[@jordan992020]

Do you have a workaround for FF & IE ?

[@g-kems]

Any solution for compatibility on Firefox?

[@rahulsuresh6866]

Great one, but this seems to look wierd on Firefox. Do you have any alternate solution for that?

[@slammerton]

Firefox is still not supporting it...

[@andrewjutub]

Is the effect works correct on ios safari web browser ?

[@morganbernard1631]

Hello, i use sublime text 3 to code and there isn't the propertie backdrop-filter, somoene know if i can add it ? 🙏

[@tejasasthana6951]

👏👏

[@AdrianTwarog]

Thanks

[@kidddirt414]

My html I got
With css
.banner {
background-image: the image
Filter: blur(1px)
}
And for some reason my whole page even including my text is blurred do u have any coding tips that can help me our

[@mih1110]

any workarounds for firefox?

[@bengen12]

interesting

[@ginomilthonlevanocarh931]

like,like,like,like!!!

[@dinuwishorts]

Alhamdulillah, I find this

[@HurikaneTv]

Backdrop-filter is not supported in most browsers

[@slammerton]

Its not supported in IE and Firefox

[@shehza-d]

It's good for Chrome & Edge but this Don't work on *Firefox* 😭

[@ricardogoro]

not found in mozilla! why?

[@adambelos2157]

can i add gradient to blur?

[@saandyy900]

Did you make it? I'm trying to do that but can't

[@adambelos2157]

​ @saandyy900 i got it commented i am not sure if it is everything but it was working :D /*background: linear-gradient(rgba(37, 47, 81, 0.9) ,rgba(37, 47, 81, 0) );
backdrop-filter: blur(6px);*/

[@adambelos2157]

@@saandyy900 but if you want use it on navbar :D dont its pain i had to rework it :D

[@saandyy900]

@@adambelos2157 Thank you so much, unfortunately that didn't work, it adds the blur effect on the entire div, it's not gradient blurred. 😭

[@adambelos2157]

@@saandyy900 thats posible i will check my code cuz it was working on my project

[@FranciscoRestivo96]

That kind of filter is tooo heavy and if you use it in a big and scrollable shape it could make the site fps drop a lot when you scroll.

[@AdrianTwarog]

Yeah I’ve seen performance issues but hopefully it gets better soon