Background Effects
Posted in
5461
6:48 am, September 24, 2021
Glass Effect using backdrop filter element in css
shows how you can add a frosted glass effect to your element using the backdrop-filter: blur(5px)
i think the issue with backdrop filter is that is is not supported by a few browsers.
Checking the compat on can i use: Can I Use backdrop-filter.
So while this is a nice effect, it will not work on Firefox at all, which is annoying. See if it works in the future.
Glass Effect using backdrop filter element in css Demo
View Demo Full Screen View Demo New Tab
Glass Effect using backdrop filter element in css Code
HTML
<div class='background'>
<div class='flex-center'>
<p>Frosted Glass Effect</p>
</div>
</div>
CSS
.background {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background: url("https://assets.codepen.io/5283814/water.jpg?format=auto&fit=cover")
}
div.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 500px;
margin: 0px auto;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 1rem;
}
p {
font-size: 2rem;
font-family: Helvetica;
color: #101010;
}
External Link for Glass Effect using backdrop filter element in css
Related Tags
Add Comment
Other Items in Background Effects
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript