JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div id="gradient">
  <img src="https://media.sweetwater.com/m/checkout/payment-link/thanks-page-hero.jpg" alt="" id="img">
</div>

CSS

#gradient {
  background: linear-gradient(to bottom, #024073 60%, #220B46);
  position: relative;
  width: 100vw;
  min-height: 100vh;
}

#img {
  position: absolute;
  max-width: 100%;
  height: auto;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: multiply;
}