Skip to content

Instantly share code, notes, and snippets.

@deavy
Forked from AllThingsSmitty/effect.css
Created August 22, 2016 07:13
Show Gist options
  • Save deavy/c57171a007ce8b11aef1554b344517a4 to your computer and use it in GitHub Desktop.
Save deavy/c57171a007ce8b11aef1554b344517a4 to your computer and use it in GitHub Desktop.
iOS-like transparency effect in CSS with backdrop-filter
.modal {
padding: 1rem 2rem;
max-width: 50%;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
font-family: sans-serif;
line-height: 1.5;
}
.modal a { color: #bf0222; }
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.modal {
background-color: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.warning { display: none; }
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-image: url("http://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
width: 100%;
height: 100%;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
<div class="container">
<div class="modal">
<p class="warning"><strong>This only works in the <a href="http://nightly.webkit.org/">Webkit Nightlies</a>!</strong></p>
<p>The background image should be pleasantly blurred under this box, <a href="http://i.imgur.com/z7s7uf6.png">like so</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quae distinctio magnam, laborum iusto itaque autem! Molestiae enim distinctio molestias, dolores ea quasi magni nisi aspernatur magnam, voluptate eum fuga.</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment