CSS Blurred Glass Effect Transparent Div | Frosted Glass Effect

Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
Music Credit
Track: Tobu - Roots [NCS Release]
Music provided by NoCopyrightSounds.
• Tobu - Roots | House |...

[@GARINOVPLAY]

filter: blur(2px) - end. Thx!)

[@yogendrayadav5608]

Dhanyawad ...bahut zyada

[@MrShedom8]

But that blurs the text as well

[@tanishkpandey6801]

Box shadow bhi hai

[@nahuelastor9320]

x'D

[@shahid9676]

Online tutorials the best always love u gys i learn many thinks !

[@peepwebdev575]

OMG thank you so much. I cannot tell you how difficult it has been to try and achieve this. A lot of people say oh its super easy, but are not actually creating a true Frosted Glass effect. This is the legit way of doing it.

[@zholy9]

Awesome ... thank you very much.

[@ashikurrahman4875]

you should paste code on github or code pen. it will help too :)

[@reksamohammad6941]

Can you make it dynamic backgroud? I mean if you using such an alert or popup the background still blured?

[@curiosityhouse1036]

Thank you soo much for this

[@12bhavinchauhan3]

Nice transperant

[@tanzzzzz225]

Awesome!!

[@facundocorradini]

backdrop-filter: blur(2px);

though that only works on Edge and Safari, and is behind a flag in Chrome

[@sudeep.g]

Lol no support on Mozilla till date

[@baykus790]

cant believe that worked. Hole video is just more details and techniques..

[@ashawinpbalode9249]

appreciate your work bro

[@rody8585]

Does it work on a VideoStream?

[@desk6173]

muchas gracias bro

[@spannerwindslayer]

Thanks!

[@eliasneanderthal1734]

My background image does not quite fit. Is there a way you can show the whole jpg image? For me it shows only a part of it.

[@CuspElectronic]

with these settings the background does not turn white at the end, and the content starts at the center if there is a lot of content.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(fondo2.jpg);
background-attachment: fixed;
height: 100vh;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
section .box
{
position: relative;
max-width: 600px;
padding: 50px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
overflow: hidden;
color: #000;
padding: 25px;
margin: 100px auto;
max-width: 600px;
}
section .box h2
{
position: relative;
margin: 0 0 20px;
padding: 0;
font-size: 48px;
text-transform: uppercase;
z-index: 2;
}
section .box:before
{
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url(fondo2.jpg);
background-attachment: fixed;
filter: blur(5px);
}
section .box p
{
position: relative;
margin: 0;
padding: 0;
font-size: 18px;
z-index: 2;
}

[@user-lb7ff9iy9s]

Good !

[@humongouzztudio5867]

Thank you.

[@eshkollori2992]

love it

[@cognitivetech8323]

Hey E, you will love this as well

[@Diego-CR]

The besttt🤗

[@redabeg]

But the text is not in the center.

[@sasitaren7293]

How you think like this????

[@mohamedmorh]

why you're not verified while you have more than 810 vids; is that not your goal

[@OnlineTutorialsYT]

No verified option since

[@YashRaj-yq8pj]

I am first

[@achmadfauzi7293]

I can't do what you do but the code is the same as yours.

[@astrolit79]

But video background ?

[@aleatoryaviator3487]

filter: blur(5px);

[@videocasetteTV]

You are migician

[@explosionimplosion4679]

BRUH. It's WAAAAY easier than that,
Here's what you need on the text div:
background: transparent;
backdrop-filter: blur(2px);
You're welcome.

[@OnlineTutorialsYT]

Thanks...for giving me idea for my next video 🙂👍

[@explosionimplosion4679]

@@OnlineTutorialsYT XD Np! I love watching your videos! Also I made my portfolio with your responsive portfolio website tutorial, may I have permission to use it (I know that it's copyrighted by you)

[@OnlineTutorialsYT]

Yes , you can use

[@explosionimplosion4679]

@@OnlineTutorialsYT Thank you!

[@octaviobillatoro825]

Worked for me, thanks!!
All I've been looking for, in one comment 😜

[@sicnic7112]

To avoid all this bs code, all you really need is this "backdrop-filter: blur(2px);" That's literally it.

[@basilicous1114]

This code isn't bullshit, as backdrop-filter isn't supported on firefox

[@lannaoliveira6742]

OMG thank you so much

[@achmadfauzi7293]

not successful