Using CSS, Can You Apply a Gradient Mask to Fade to the Background Over Text

Using CSS, can you apply a gradient mask to fade to the background over text?

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

(The new standardised way of doing it is would use mask-image and linear-gradient using its new syntax. See caniuse.com for mask-image and linear-gradient.)

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 50% to make sure that content is only faded when there is more to scroll to.

Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet... Use mask-image in Firefox now.

Apply gradient mask with css

Please test this demo in Chrome: http://jsfiddle.net/95vPC/5/

<div class="element">
    <p>Lorem ipsum dolor sit … amet.</p>
</div>

* {
    margin: 0px;
    padding: 0px;
}
.element {
    width: auto;
    height: 300px;
    overflow: hidden;
    color: #fff;
    background: #000045;
    -webkit-mask-position: 0 0;
    /*-webkit-mask-size: 200px 200px;*/
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 0)), color-stop(19%, rgba(30, 87, 153, 0.66)), color-stop(29%, rgba(45, 70, 237, 1)), color-stop(100%, rgba(45, 70, 237, 0)));
}

CSS: How to fade text from top and bottom?

This is because of the nature of CSS. If you apply two declarations for the same property only one will preside! You can create a single class with a different linear gradient that starts transparent goes to black then ends transparent such as:

.top-bottom-overflow-fade {
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

EDIT

The question posed in the comments asks what the values are that are passed to the linear-gradient function:

1. The first argument is an optional value that controls the direction of the gradient. This can be described using some keywords (such as to left top or to right) or with an angle of rotation. In CSS the units used to express angles can be in the form of deg (degrees), turn, rad (radians), or grad (gradians). The default direction is from top to bottom if none is supplied. Note that I didn't include this so the default direction is used.
2. The remaining arguments are a list of colors and optional values for where the color should start and stop called color stops. You may use as many color stops as you wish. The more color stops you have the narrower each 'band' of color will become. A color stop list without any 'hints', or start and stop points, will have a smooth transition from one color to the next because it will apply the color start and stop points uniformly. If you want an abrupt transition from one color to the next, you would set the stopping percentage of the first color to the same value as the starting percentage of the next color. Some clever and artistic people produce amazing patterns with CSS gradients by taking advantage of the background-image property's ability to stack multiple images (gradients are treated as background-images not background-colors)!

How can I apply a fade-out-text effect with a transparent-to-white gradient?

Looks like changing positon: relative; to position: absolute; solved the problem.

Making a css animation using a transparent gradient mask

You are almost good, you only need to disable the repetition by using mask-repeat: no-repeat

.container {
  height: 100vh;
  background-color: white;
  position: relative;
}

.first {
  background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
  background-size: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-mask-image: linear-gradient(to left, transparent, black 20rem);
  -webkit-mask-repeat: no-repeat;
  -webkit-animation: rightToLeft 5s forwards;
}

@keyframes rightToLeft {
  0% {
    -webkit-mask-position: 100vw 0%;
    mask-position: 100vw 0%;
  }
  100% {
    -webkit-mask-position: 0vw 0vw;
    mask-position: 0vw 0vw;
  }
}

body {
 margin:0;
}

<div class="container">
  <div id="first" class="first"> </div>
</div>

article {
  position: relative;
}

article:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%, 
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}

  <article>
      <p>
         Had you stepped on board the Pequod at a certain juncture 
         of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers. Had you stepped on board the Pequod at a certain 
         juncture of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers.
      </p>
  </article>