CodePen

HTML

            
              <h1>Multi-line<br/>Text Fading</h1>
            
          
!
via HTML Inspector

CSS

            
              @function parseFloat($n) {
  @return $n / ($n * 0 + 1);
}

@mixin text-fade (
    $color,
    $background-color,
    $line-height
  ) {
  
  $u: unit($line-height);
  $lh: parseFloat($line-height);
  
  @if ($u == "") {
    $u: "em"; 
  }
  
  color: $color;
  line-height: $line-height; // The line height must be large enough to cover ascenders & descenders.
  position: relative;
  overflow: hidden; // If the text overflows, the style won't be applied, so we hide.

  &:after {
    content: '';
    background-image: repeating-linear-gradient(
      rgba($background-color, 0.0), // Colors must either be transparent or match the background color; background images, patterns and gradients are not supported.
      rgba($background-color, 0.0) #{$lh * 0.25}unquote($u), // The length here is based on the line height: beginning the color transition at 25% of the line height, ...
      rgba($background-color, 0.65) #{$lh * 0.75}unquote($u), // ... with another color stop being added at 75%, ...
      rgba($background-color, 0.80) #{$lh}unquote($u)); // ... and ending at 100%. The length of the final color stop must always be equivalent to the line height.
    display: block;
    position: absolute;
    top    : 0; right : 0;
    bottom : 0; left  : 0;
    pointer-events: none; // This allows the text to be easily selectable.
  }

  /* Enable advanced clipping in Webkit */
  @supports (-webkit-background-clip: text) {

    & {
      -webkit-background-clip: text; // Clip the background to the text     
      text-fill-color: transparent; // The color must be (partially) transparent to see the background.
      /**
       * The gradient below will be acting as the text fill
       * color; full opacity will generally be desired.
       * Otherwise, the logic above still applies.
       */
      background-color: $color;
      background-image: repeating-linear-gradient(
        rgba($background-color, 0),
        rgba($background-color, 0) #{$lh * 0.25}unquote($u),
        rgba($background-color, 0.65) #{$lh * 0.75}unquote($u),
        rgba($background-color, 0.80) #{$lh}unquote($u));
    }

    &:after {
      display: none;
    }
  }
}

h1 {
  @include text-fade(
    $color: hsl(318, 92%, 95%),
    $background-color: hsl(318, 92%, 30%),
    $line-height: 1.2
  );
  font-size: 2.75em;
  display: inline-block;
}

/* Background */
body {
  background-color: hsl(318, 92%, 30%);
}

/* Center */
html,body{height:100%;}html{display:table;width:100%;}body{display:table-cell;vertical-align:middle;text-align:center;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................