<div class="wrapper">
  <aside class="aside">
    <div class="aside__content">
      <h1>Hello Toster</h1>
      <p>Some text here</p>
    </div>
  </aside>
</div>
.wrapper {
  display:flex;
  height:100%;
  background:url('https://w.wallhaven.cc/full/dg/wallhaven-dgeqoj.jpg') 50% 50% / cover no-repeat
}
.aside {
  position:relative;
  min-width:40%;
  text-align:center;
  color:#FFF;
  box-shadow:rgba(0,0,0,.45) 10px 0 10px 0
}
.aside:after {
  display:block;
  position:absolute;
  content:'';
  top:0;
  height:100%;
  width:100%;
  backdrop-filter: blur(3px);
}
.aside__content {
  position:relative;
  z-index:1;
  padding:15px;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  height:100%
}

/* HELPERS */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
  box-sizing:border-box
}
body, html {
  height:100%;
  padding:0;
  margin:0;
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-size:42px;
  padding:0;
  margin:0
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.