JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="img">
  <div class="img-inner"></div>
</div>

CSS

.img {
  background: no-repeat url(https://www.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg) center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 300px;
}
.img-inner {
  background: linear-gradient(to left, #fff, transparent);
  width: 100%;
  height: 100%;
}
.img-inner::before {
  content: '';
  background: no-repeat url(https://www.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg) center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(10px);
}