Transparent Gradient

<div class="container">
  <img src="/images/jeremy-hynes-zLrqHNms8eE-unsplash.jpg" alt="">
  <div class="content"></div>
</div>

<style>
  body {
    background-image:
        linear-gradient(#ededed 1px, transparent 1px),
        linear-gradient(90deg, #ededed 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: fixed;
  }
  .container {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: -2px;
    filter: blur(2px);
    /* @see https://larsenwork.com/easing-gradients/#editor */
    mask-image: linear-gradient(
      to bottom,
      hsl(0, 0%, 100%) 0%,
      hsla(0, 0%, 100%, 0.987) 8.1%,
      hsla(0, 0%, 100%, 0.951) 15.5%,
      hsla(0, 0%, 100%, 0.896) 22.5%,
      hsla(0, 0%, 100%, 0.825) 29%,
      hsla(0, 0%, 100%, 0.741) 35.3%,
      hsla(0, 0%, 100%, 0.648) 41.2%,
      hsla(0, 0%, 100%, 0.55) 47.1%,
      hsla(0, 0%, 100%, 0.45) 52.9%,
      hsla(0, 0%, 100%, 0.352) 58.8%,
      hsla(0, 0%, 100%, 0.259) 64.7%,
      hsla(0, 0%, 100%, 0.175) 71%,
      hsla(0, 0%, 100%, 0.104) 77.5%,
      hsla(0, 0%, 100%, 0.049) 84.5%,
      hsla(0, 0%, 100%, 0.013) 91.9%,
      hsla(0, 0%, 100%, 0) 100%
      );
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .content {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 255) 0%, rgba(255, 255, 255, 0) 100%);
  }
</style>