GLASS Effect With CSS

A Tutorial on how to add a glass effect to a div with CSS
With this you can create your own variations, just change the CSS properties the way you like it
📋 CODE ⬇️
.glass{
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border:1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

[@marwanmano8070]

Some hints can make video better :
1-split the screen to show people how every element effect not just as copy and paste the code
2-with voice explan what you doing and how every elements work even of its easy but there is beginner still need it
3- put the final result at the first of the video then explain how did it (it make people more interesting to see the good part that the final result then see the code part )

[@smsmsmow4109]

yes i wish he splite the screen

[@sereia201]

thank you!!!!! i started studying a little while ago and i have a lot of difficulty with css, you saved me!

[@sanzhar.danybayev]

Hint: don't use too much elements with blur effect, for low-budget devices it will cause freezing up. Keep in mind that it's completely not supported by Firefox.

[@barfeeli_baatcheet]

Yeah it was a big trouble for making it in firefox.
I just gave up.

[@sanzhar.danybayev]

@@barfeeli_baatcheet it sucks. I also got rid of it.

[@xen0076]

+1

[@qozia1370]

Well I guess Firefox deserves to die then!
I support Mozilla but it should be supported its extremely beautiful.

[@Arcane_Dragon878]

Currently did this in firefox
I suppose it got support for it across the years

[@YashArya]

thanks a lot
short and to the point video really helped me in my project

[@herono-4292]

Bro ! You put the code on description, thank you so much, f**k !

[@taplak-guplak-gepuk]

Short and helpfully

[@vinitkasture5471]

you just made life easier

[@cluelessexpert]

you can find the CSS code in the description & *important* as of right now Firefox doesn't support this

[@shoumikkumbhakar6375]

uninstalled firefox just now
:)

[@webdevratnesh]

Thanks! Buddy
NIce help

[@WowNemy]

Thank you so much!

[@Leo-uh4jg]

Thanks you really help )

[@sparkscomputerprogramming]

Cool but a good teacher explains to his students what each lime of code does, i copied but dont know why we used gradient or webkit

[@danielbeeber5587]

Thanks

[@ishanmadushanka3709]

thank you bro

[@nelsonantonio5870]

Thank you Sir.

[@Viezieg]

thx, but how to do it so that the text on the card wont blur ?

[@Mreti_Zanave]

Maybe with z-index 0 for the box and 1 for the text

[@emilelcl7565]

Merci frère ! 😂

[@casesensitive9744]

why do people be making lots of video on backdrop filter when it is the simplest thing to use. We want video on how to blur background with filter: blur;

[@lexgim]

love u

[@isaacdev-nl6dm]

[@devilsingh6052]

It doesn't work in my pc:-
backdrop-filter:blue(10px);
-webkit-backdrop-filter:blue(10px);
I don't know why

[@ajaybains3843]

its blur(10px) not blue(10px)

[@mirza_rohan_ahamed]

❤❤❤

[@codewithsehran]

why it's too easy

[@yankoajuran7424]

frr t français ou ?? XD

[@kevin_lindberg]

Didt work.

[@cluelessexpert]

which browser are you using?

[@cameleonarabic8124]

set the height and width in .glass to like 400px

[@XTANCE]

It doesn't work in the only one actual browser out there, which is Firefox.
Bruh.

[@jhonatanreivin]

wallpaper??

[@cluelessexpert]

I think it’s the 2020 iPad Air wallpaper

[@nasteemusic]

Bro let me tell you : thanks a lot

[@ninjacodertech]

woah thats so much easier than i though

[@kanikasharma2164]

Thanks for helping me

[@FilipCodes]

Nice video man. Interested in a collab?

[@ASMRWEBCODING]

nice try...👍

[@sublime4967]

thanks, really nice man. Liked

[@isaacola7596]

nice and simple!

[@adriandev6516]

Woooo 🤩

[@younessbenaguida9895]

Lah y3tk se7a ❤

[@MohammedMharzi]

khdam lik page config.php

[@younessbenaguida9895]

@@MohammedMharzi kifach