<div class="container">
<div class="box backdrop-filter">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
.backdrop-filter {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.box {
padding: 20px 40px;
border-radius: 5px;
text-align: center;
font-family: monospace;
border: 1px solid rgba(0, 0, 0, 0.2);
}
body {
background-image: url('https://xiaopc.org/logo.png');
background-position: center;
background-repeat: repeat-y;
height: 500vh;
}
.container {
align-items: center;
position: fixed;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.