<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.