<h1>Multi-line<br/>Text Fading</h1>

@import "compass/css3";

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

//*
// Create a faded text effect.
// NOTE: Background images are not supported
//
// @param color $color The color of the text
// @param color $background-color The background color. Not necessarily the elements
//   background color, but the color of the background behind the element
// @param number $line-height The line height. The line height must be large enough
//   to cover ascenders & descenders.
//
@mixin text-fade (
    $color,
    $background-color,
    $line-height
  ) {
  
  // Unitless line height uses em's
  $u: if(unitless($line-height), em, unit($line-height));
  $lh: parseFloat($line-height);
  
  color: $color;
  line-height: $line-height; 
  position: relative;

  // If the text overflows, the style won't be applied, so we hide
  overflow: hidden; 

  &:after {
    content: '';

    background-image: repeating-linear-gradient(
      // Color must match the background color
      rgba($background-color, 0.0),
      // The length here is based on the line height:
      // beginning the color transition at 25% of the line height, ...
      rgba($background-color, 0.0) #{$lh * 0.25 + $u},
      // ... with another color stop being added at 75%, ...
      rgba($background-color, 0.65) #{$lh * 0.75 + $u},
      // ... and ending at 100%.
      // The length of the final color stop must always be equivalent to the line height.
      rgba($background-color, 0.80) #{$lh + $u});
    
    display: block;
    position: absolute;
    top    : 0; right : 0;
    bottom : 0; left  : 0;
    
    // Allows the text to be easily selectable
    pointer-events: none;
  }

  // Enable advanced clipping in browsers that support it
  @supports (-webkit-background-clip: text) {

    & {
      // Clip the background to the text   
      -webkit-background-clip: text;
      // The color must be transparent to see the background
      text-fill-color: transparent;
      
      // This gradient acts 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 + $u},
        rgba($background-color, 0.65) #{$lh * 0.75 + $u},
        rgba($background-color, 0.80) #{$lh + $u});
    }

    // We no longer need this
    &:after {
      display: none;
    }
  }
}

$background-color: hsl(318, 92%, 40%);

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

// Background
body {
  background-color: $background-color;
}

/* Center */
html,body{height:100%;}html{display:table;width:100%;}body{display:table-cell;vertical-align:middle;text-align:center;}