Для того, чтобы сделать тень для текста используется свойство text-shadow:

text-shadow: 1px 1px #972c16;

Но, для того чтобы сделать длинную тень, нужно использовать это свойство так:

.long-shadow {
	text-shadow: 0px 0px #972c16,
	1px 1px #972c16,
	2px 2px #972c16,
	3px 3px #972c16,
	4px 4px #972c16,
	5px 5px #972c16,
	/* ... */
	34px 34px #972c16,
	35px 35px #972c16;
}

Как види-те, регулировать длину тени и её цвет абсолютно не удобно. Поэтому автоматизируем процесс с помощью препроцессора SCSS:

@function longShadow($color, $lenght: 40) {
	$val: 0px 0px $color;
	@for $i from 1 through $lenght {
		$val: #{$val}, #{$i}px #{$i}px #{$color};
	}
	@return $val;
}

Пример использования:

See the Pen WQxrVX by Evgeniy Pakalo (@wcoder) on CodePen.

Теги: заметка, css, scss