Blur

by Eduard Dyckman

HTML

<div class="screen">
  <div class="top-box">
  </div>
  <div class="paranja">
  
  </div>
  SOME WORDS BELOW
</div>

CSS

.screen {
  width: 400px;
  height: 600px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: bold;
  font-size: 20px;
  
}
body {
  background-color: black;
}
.top-box {
  width: 100%;
  height: 40px;
  border-bottom: 2px solid #FFCC00;
  position: absolute;
  top: 0;
  box-sizing: border-box;
}
.paranja {
  position: absolute;
  top: 40px;
  width: 100%;
  bottom: 0;
  backdrop-filter: blur(3px);
  background-color: rgba(0,0,0,.5);
  background-size: cover;
}