JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>===</p>
<p>===</p>
<p>===</p>
<p>===</p>
<p>===</p>

<div class="pattern">
gradient image
</div>

CSS

body {margin:0;}

.pattern {min-height:500px;
background-image:url('https://www.hloe.co.uk/pattern2.jpg');background-position: center bottom;
mask-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);

}