Is it possible to use pure CSS to make a HTML container be gradient fade away in a fixed height?

Question

Here is the code

h1 {margin-top:1em}
#wrap {height:260px; overflow:hidden}

<div id="wrap">
<h1>h1 Title</h1>
<p>Lorem ipsum dolor sit amet, commodo virtute in eam, delenit accusam repudiandae mei ne. No electram moderatius mei, te nusquam assentior definiebas sea. Te brute nominavi mel, quot quodsi doctus has no. No sed putent nostrud ullamcorper, no idque oratio consulatu eos. Ius ne wisi denique, ea inani perpetua sapientem vix, in brute vivendum ius.
</p>
<p>
Inani voluptua ne sea, doming vivendum eos ea. Mea amet vero delicata ea, mazim contentiones cu per. Oratio dolores eu sit, tation perfecto adolescens nam an, lorem ludus sea id. In mollis iuvaret maluisset vim, illum mundi eos ut.
</p>
<p>
Eu nam agam putent utamur, oblique recusabo cum id. Clita elaboraret interesset pro no. Et rationibus sadipscing cum, ut nam everti gloriatur. Cu eos veniam laudem aeterno, duo ad equidem delenit vulputate. Sit in agam sale, nisl congue animal eu vis, eam in placerat imperdiet consequuntur. In soluta volutpat usu, harum tibique ut quo.
</p>
<p>
Stet blandit an sit, populo efficiendi an sea, exerci mandamus ea mei. An vel nonumes lobortis, ne vim alterum veritus moderatius, per recteque contentiones id. Ei sed wisi timeam, nam molestie praesent salutandi eu. Et fuisset antiopam partiendo est.
</p>
<p>
Delicata necessitatibus at quo, idque adipiscing necessitatibus in eos, falli omnium moderatius an eam. Veniam essent nostrum mea at, pri ceteros salutatus vituperata te, oblique prompta et eum. Mea eu civibus evertitur, eam ei commodo viderer insolens, ne sed augue atomorum hendrerit. Iriure accusata omittantur his ei, id iriure aperiam cotidieque has. In sale doctus mel. Et per homero graeci, sea decore detraxit efficiendi cu. Duo doctus postulant ei, esse mnesarchum posidonium cu qui.</p>
</div>

I want to fold the container #wrap into a smaller height to save some room on the page. However, if I just use overflow:hidden, the effect is not very smooth. It's ugly and would make the user confuse about whether there is more content to read.

I hope there's some pure CSS way to make it like what's showed in the picture below:

Answer 1

Yup, you can use mask-image then gradient

something like this:

#wrap {
  height: 200px;
  overflow:hidden;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

<div id="wrap">
  <h1>h1 Title</h1>
  <p>Lorem ipsum dolor sit amet, commodo virtute in eam, delenit accusam repudiandae mei ne. No electram moderatius mei, te nusquam assentior definiebas sea. Te brute nominavi mel, quot quodsi doctus has no. No sed putent nostrud ullamcorper, no idque oratio
    consulatu eos. Ius ne wisi denique, ea inani perpetua sapientem vix, in brute vivendum ius.
  </p>
  <p>
    Inani voluptua ne sea, doming vivendum eos ea. Mea amet vero delicata ea, mazim contentiones cu per. Oratio dolores eu sit, tation perfecto adolescens nam an, lorem ludus sea id. In mollis iuvaret maluisset vim, illum mundi eos ut.
  </p>
  <p>
    Eu nam agam putent utamur, oblique recusabo cum id. Clita elaboraret interesset pro no. Et rationibus sadipscing cum, ut nam everti gloriatur. Cu eos veniam laudem aeterno, duo ad equidem delenit vulputate. Sit in agam sale, nisl congue animal eu vis,
    eam in placerat imperdiet consequuntur. In soluta volutpat usu, harum tibique ut quo.
  </p>
  <p>
    Stet blandit an sit, populo efficiendi an sea, exerci mandamus ea mei. An vel nonumes lobortis, ne vim alterum veritus moderatius, per recteque contentiones id. Ei sed wisi timeam, nam molestie praesent salutandi eu. Et fuisset antiopam partiendo est.
  </p>
  <p>
    Delicata necessitatibus at quo, idque adipiscing necessitatibus in eos, falli omnium moderatius an eam. Veniam essent nostrum mea at, pri ceteros salutatus vituperata te, oblique prompta et eum. Mea eu civibus evertitur, eam ei commodo viderer insolens,
    ne sed augue atomorum hendrerit. Iriure accusata omittantur his ei, id iriure aperiam cotidieque has. In sale doctus mel. Et per homero graeci, sea decore detraxit efficiendi cu. Duo doctus postulant ei, esse mnesarchum posidonium cu qui.</p>
</div>

Another option is to use mix-blend-mode with pseudo element. it is important to have pointer-events: none; in the pseudo element so the contents would not be covered, or it will be naturally selectable/ accessable when clicking or click-drag to select the texts

#wrap {
  overflow: hidden;
  position: relative;
  height: 200px;
  mix-blend-mode: hard-light;
}

#wrap::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

<div id="wrap">
  <h1>h1 Title</h1>
  <p>Lorem ipsum dolor sit amet, commodo virtute in eam, delenit accusam repudiandae mei ne. No electram moderatius mei, te nusquam assentior definiebas sea. Te brute nominavi mel, quot quodsi doctus has no. No sed putent nostrud ullamcorper, no idque oratio
    consulatu eos. Ius ne wisi denique, ea inani perpetua sapientem vix, in brute vivendum ius.
  </p>
  <p>
    Inani voluptua ne sea, doming vivendum eos ea. Mea amet vero delicata ea, mazim contentiones cu per. Oratio dolores eu sit, tation perfecto adolescens nam an, lorem ludus sea id. In mollis iuvaret maluisset vim, illum mundi eos ut.
  </p>
  <p>
    Eu nam agam putent utamur, oblique recusabo cum id. Clita elaboraret interesset pro no. Et rationibus sadipscing cum, ut nam everti gloriatur. Cu eos veniam laudem aeterno, duo ad equidem delenit vulputate. Sit in agam sale, nisl congue animal eu vis,
    eam in placerat imperdiet consequuntur. In soluta volutpat usu, harum tibique ut quo.
  </p>
  <p>
    Stet blandit an sit, populo efficiendi an sea, exerci mandamus ea mei. An vel nonumes lobortis, ne vim alterum veritus moderatius, per recteque contentiones id. Ei sed wisi timeam, nam molestie praesent salutandi eu. Et fuisset antiopam partiendo est.
  </p>
  <p>
    Delicata necessitatibus at quo, idque adipiscing necessitatibus in eos, falli omnium moderatius an eam. Veniam essent nostrum mea at, pri ceteros salutatus vituperata te, oblique prompta et eum. Mea eu civibus evertitur, eam ei commodo viderer insolens,
    ne sed augue atomorum hendrerit. Iriure accusata omittantur his ei, id iriure aperiam cotidieque has. In sale doctus mel. Et per homero graeci, sea decore detraxit efficiendi cu. Duo doctus postulant ei, esse mnesarchum posidonium cu qui.</p>
</div>

Answer 2

Another method is using the psuedo class ::after to add the fade gradient as a background image

h1 {margin-top:1em}
#wrap {height:260px; overflow:hidden; position: relative;}
#wrap::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 80%;
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

<div id="wrap">
<h1>h1 Title</h1>
<p>Lorem ipsum dolor sit amet, commodo virtute in eam, delenit accusam repudiandae mei ne. No electram moderatius mei, te nusquam assentior definiebas sea. Te brute nominavi mel, quot quodsi doctus has no. No sed putent nostrud ullamcorper, no idque oratio consulatu eos. Ius ne wisi denique, ea inani perpetua sapientem vix, in brute vivendum ius.
</p>
<p>
Inani voluptua ne sea, doming vivendum eos ea. Mea amet vero delicata ea, mazim contentiones cu per. Oratio dolores eu sit, tation perfecto adolescens nam an, lorem ludus sea id. In mollis iuvaret maluisset vim, illum mundi eos ut.
</p>
<p>
Eu nam agam putent utamur, oblique recusabo cum id. Clita elaboraret interesset pro no. Et rationibus sadipscing cum, ut nam everti gloriatur. Cu eos veniam laudem aeterno, duo ad equidem delenit vulputate. Sit in agam sale, nisl congue animal eu vis, eam in placerat imperdiet consequuntur. In soluta volutpat usu, harum tibique ut quo.
</p>
<p>
Stet blandit an sit, populo efficiendi an sea, exerci mandamus ea mei. An vel nonumes lobortis, ne vim alterum veritus moderatius, per recteque contentiones id. Ei sed wisi timeam, nam molestie praesent salutandi eu. Et fuisset antiopam partiendo est.
</p>
<p>
Delicata necessitatibus at quo, idque adipiscing necessitatibus in eos, falli omnium moderatius an eam. Veniam essent nostrum mea at, pri ceteros salutatus vituperata te, oblique prompta et eum. Mea eu civibus evertitur, eam ei commodo viderer insolens, ne sed augue atomorum hendrerit. Iriure accusata omittantur his ei, id iriure aperiam cotidieque has. In sale doctus mel. Et per homero graeci, sea decore detraxit efficiendi cu. Duo doctus postulant ei, esse mnesarchum posidonium cu qui.</p>
</div>