<div class="block">
  <div class="first">
    <p class="shadow"></p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In expedita atque cupiditate corrupti a, nisi dolor quasi excepturi exercitationem? Exercitationem quia quo ipsum at sed quasi? Fugiat possimus minus voluptatum?
  </div>
  <div class="second"></div>
</div>

*{
  margin: 0;
  padding: 0
}

.block{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
}

.first{
  width: 50%;
  background: #000;
  position: relative
}

.shadow{
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 25%;
  filter: blur(5px)
}

.shadow::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 31% 8%, 49% 5%, 75% 5%, 84% 19%, 88% 31%, 90% 60%, 78% 77%, 60% 100%, 0 100%, 0 80%, 0 52%);
background: rgba(0,0,0,.75);
}

.second{
  width: 50%;
  background: blue;
}