Tranparent gradient to shade a div-CodePudding

I'd like to shade a div to show the user he can scroll to see the rest of the content of the div. Apparently, the only solution available is a linear-gradient to gradually set the color for example from white with opacity 1 to white with opacity 0. But that's the problem: my div doesn't have any background-color. The div is in front of a background-image (not attached to the div). I'd like to "mask" the div with a linear shade, so that the div progressively disappears. Is there a CSS way to do this?

CodePudding user response：

This is the job of mask:

.box {
  border:2px solid;
  width:200px;
  
  -webkit-mask:linear-gradient(#000,#0000);
}

body {
 background:linear-gradient(to right,pink,lightblue);
}

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis velit non massa maximus egestas. Nam fermentum tortor feugiat dui imperdiet euismod. Cras non massa in magna dignissim tempus. Proin in molestie diam, a lacinia nunc. Sed non venenatis arcu.</div>