Glass blur tiles

glass-blur-tiles.markdown

Glass blur tiles

A Pen by Steven Hagen on CodePen.

License.

index.html

<div class="viewport">
  <h1>Pure CSS Backround blur tiles</h1>
  <div class="tiles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

style.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
body{
  font-family: 'Rubik', sans-serif;
  padding:48px;
  background-image: url("https://images.pexels.com/photos/4856367/pexels-photo-4856367.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  background-attachment: fixed;
}
h1{
  margin:  16px 8px 16px 8px;
  font-size:36px;
  color:#fff;
}
.viewport{
  display:block;
  margin: auto;
  width:414px;
  padding: 16px 8px 16px 8px;
  text-align:center;
  background-color: rgba(225,225,225,0.2);
  box-shadow: 0px 24px 24px rgba(0,0,0,0.4);
  border: 1px solid rgba(225,225,225,0.1);
  border-radius:16px;
}

.tiles div{
  display:inline-block;
  margin:8px;
  width: 175px;
  height:140px;
  background-color: rgba(225,225,225,0.2);
  box-shadow: 0px 16px 24px rgba(0,0,0,0.3);
  border: 1px solid rgba(225,225,225,0.1);
  border-radius:16px;
  backdrop-filter: blur(10px);
}



Resources1× 0.5× 0.25×Rerun