Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="gradient-text-wrapper">
    <h1 class="gradient-text">this is some gradient text</h1>
    <span class="gradient-text">this is some more gradient text</span>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// mixin for gradient text

/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
@function colorStopGradient($colors, $positions) {
	$gradient: null;
	@for $i from 1 through length($colors) {
		$color: nth($colors, $i);
		$position: nth($positions, $i);
		$gradient: append($gradient, color-stop($position, $color), comma);
	}
	@return $gradient;
}

/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
@function standardGradient($colors, $positions) {
	$gradient: null;
	@for $i from 1 through length($colors) {
		$color: nth($colors, $i);
		$position: nth($positions, $i);
		$gradient: append($gradient, ($color $position), comma);
	}
	@return $gradient;
}

/*
 $type : type of gradient to make - ie: linear
 $fromTo: from and to positions for gradient - ie: left top, left bottom
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $textShadow : text shadow string for non-webkit fallback
*/
@mixin generateGradientStyle ($type, $direction, $colors, $positions, $color, $textShadow) {
	display: inline;
	background: transparent;
  
  position: relative;
	background: -webkit-gradient(
			$type,
			$direction,
			colorStopGradient($colors, $positions)
	);

	background: -webkit-#{$type}-gradient(
			$direction,
			standardGradient($colors, $positions)
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	-moz-text-shadow: unquote($textShadow);
	-o-text-shadow: unquote($textShadow);
}

/*
 $direction: direction of the gradient - ie: top left
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $type (optional) : type of gradient to make - ie: linear
 $gradientShadow (optional) : text shadow string for gradient text
 $normalShadow (opional) : text shadow string for non-webkit fallback
*/
@mixin gradient-text ($colors, $positions, $type: linear, $direction: top, $gradientShadow: null, $fallbackColor: #ff2, $fallbackShadow: null) {
	@if ($gradientShadow == null ) {
		$gradientShadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.4);
	}

	.gradient-text {
		@include generateGradientStyle($type, $direction, $colors, $positions, $fallbackColor, $fallbackShadow);
	}
	.gradient-text:before {
		position: absolute;
		background: none;
		content: attr(data-gradient-text);
		text-shadow: unquote($gradientShadow);
		top: 0;
		left: 0;
		z-index: -1;
	}
}



// usage
.gradient-text-wrapper {
    position: absolute;
    
    width: 960px;
    
    font-size: 60px;
    font-weight: 900;
    font-family: 'Times New Roman', Times, serif;
        
    $gradientColors: #f22, #f2f, #22f, #2ff, #2f2, #2f2, #ff2, #f22;
    $gradientPositions: 0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1;
    @include gradient-text($gradientColors, $gradientPositions, linear, 220deg);  
}

SassMeister-output.css

/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
/*
 $type : type of gradient to make - ie: linear
 $fromTo: from and to positions for gradient - ie: left top, left bottom
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $textShadow : text shadow string for non-webkit fallback
*/
/*
 $direction: direction of the gradient - ie: top left
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $type (optional) : type of gradient to make - ie: linear
 $gradientShadow (optional) : text shadow string for gradient text
 $normalShadow (opional) : text shadow string for non-webkit fallback
*/
.gradient-text-wrapper {
  position: absolute;
  width: 960px;
  font-size: 60px;
  font-weight: 900;
  font-family: 'Times New Roman', Times, serif;
}
.gradient-text-wrapper .gradient-text {
  display: inline;
  background: transparent;
  background: -webkit-gradient(linear, 220deg, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background: -webkit-linear-gradient(220deg, #f22 0, #f2f 0.15, #22f 0.3, #2ff 0.45, #2f2 0.6, #2f2 0.75, #ff2 0.9, #f22 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-wrapper .gradient-text:before {
  position: absolute;
  background: none;
  content: attr(data-gradient-text);
  text-shadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: -1;
}

SassMeister-rendered.html

<div class="gradient-text-wrapper">
    <h1 class="gradient-text">this is some gradient text</h1>
    <span class="gradient-text">this is some more gradient text</span>
</div>