Tranparent gradient to shade a div

Question

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?

If possible, could you share a reference of some sort please? — Mohib Arshi, Sep 29 '21 at 07:07
Could you put up some minimal code so we can try things out. It makes it much easier to help if we can see your HTML structure and any relevant CSS. See https://stackoverflow.com/help/minimal-reproducible-example with help on how to do this. — A Haworth, Sep 29 '21 at 07:08
Maybe this will help: https://stackoverflow.com/questions/45849699/is-it-possible-to-fade-out-the-end-of-a-text-line-in-css — prettyInPink, Sep 29 '21 at 07:19
You could use pseudoelement :after. check my answer in : https://stackoverflow.com/questions/45295942/css-gradient-opacity-slide-image-left-to-right-color-white/45296073#45296073 — Alvaro Menéndez, Sep 29 '21 at 07:44

score 1 · Accepted Answer · answered Sep 29 '21 at 08:39

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>

Tranparent gradient to shade a div

1 Answers1