От автора: сегодня поговорим о том, как реализуется многострочный линейный градиент CSS.
Моей первой мыслью было:
Строки имеют отступы, и это достаточно сложно осуществить.
box-decoration-break вероятно, нам в этом поможет.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНо оказывается, что нам нужна небольшая хитрость, чтобы это заработало. Если со сплошным цветом все хорошо, то некоторые отступы, объединяемые в с box-decoration-break, должны иметь базовый фреймворк:
Но градиент там будет странным в нескольких строках:
Я хочу сказать спасибо Матиасу Отту, создавшему этот форк, который мне кажется идеальным решением:
Хитрость заключается в том, чтобы настроить плавный фон строк так, как вам нужно, с чистым белым текстом и черным фоном. Затем по всей области с градиентом устанавливается псевдо-элемент для черной области. Добавьте, mix-blend-mode: lighten;, чтобы градиент появился только в черной области. Отлично.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее