<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
body {
background: #fff;
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSdNm7n48b9qbcHNuMDIOSvJ1PhPqBWXWqhGydZaTjpD-c52KGB);
background-size: cover;
background-position: center;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
div {
min-height: 100vh;
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);
opacity: 0.3;
}
body > div:first-child {
background: red;
}
body > div:nth-child(2) {
background: green;
}
body > div:nth-child(3) {
background: blue;
}
body > div:nth-child(4) {
background: #282828;
}
body > div:nth-child(5) {
background: yellow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.