Здравствуйте! Помогите, пожалуйста, решить проблему. Есть текст с фоном градиентом, но справа фон обрывается по длине строки, фон однородный для трех строк. Пробовал через разные строки, но появляются границы. Уже всю голову сломал. Приложил картинку как должно получится.
SVG-фильтром захреначил как-то так:
Но это чисто из интереса. На бою стоит юзать вариант Ankhena, с добавкой js, если потребуется.
А вообще, по хорошему, стоило бы дизайнера отп*дить.
display: inline с однотонным фоном наложить градиент по маске
Для отступов на каждой строке используется box-decoration-break, поддержка которого слабая, но это уже другая задача. Основная часть состоит в mix-blend-mode.
В случае с белым фоном и текстом подходит mix-blend-mode: overlay с серым градиентом. С другими фонами придется поэкспериментировать, или их тоже сделать градиентом
