How to do CSS only frosted glass effect?
Usama Tahir
1098

This is a newer method, still in draft but works on Safari and Chrome with Experimental Flag enabled. In case anyone is interested.

HTML:

<div class="background flex items-center justify-center">
<div class="login-container pa4 br1">
<!-- Content -->
</div>
</div>

CSS:

/* Sets height too 100% so it will cover entire viewport */
html, body { height: 100%; }
.background {
background-image: url('http://bit.ly/2gPLxZ4');
background-repeat: no-repeat;
background-size: cover;
height: 100%; /* takes 100% of body */
}
.login-container {
backdrop-filter: blur(10px) saturate(200%); /* blur and saturate to boost colors like iOS */
background-color: rgba(255, 255, 255, 0.25);
max-width: 500px; /* demo only */
}
/* Demo Styles */
.br1 { border-radius: 3px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.pa4 { padding: 4rem; }

Codepen: https://codepen.io/mattmischuk/pen/JyGPoq

The weird classes at the bottom are some utilities from Tachyons.io

Show your support

Clapping shows how much you appreciated Matt Mischuk’s story.