Как сделать рваный фон у текста?

Question

[Jack]

Здравствуйте! Помогите, пожалуйста, решить проблему. Есть текст с фоном градиентом, но справа фон обрывается по длине строки, фон однородный для трех строк. Пробовал через разные строки, но появляются границы. Уже всю голову сломал. Приложил картинку как должно получится.

Answer 1

[Aetae]

SVG-фильтром захреначил как-то так:
Но это чисто из интереса. На бою стоит юзать вариант Ankhena, с добавкой js, если потребуется.
А вообще, по хорошему, стоило бы дизайнера отп*дить.

Comments

[Jack]

про дизайнера верно сказано! )))

Answer 2

[Ankhena]

Если разбивать по строкам, то так


Если не разбивать, то будут видны полоски.

Answer 3

[Vitaliy]

display: inline с однотонным фоном наложить градиент по маске


Для отступов на каждой строке используется box-decoration-break, поддержка которого слабая, но это уже другая задача. Основная часть состоит в mix-blend-mode.

В случае с белым фоном и текстом подходит mix-blend-mode: overlay с серым градиентом. С другими фонами придется поэкспериментировать, или их тоже сделать градиентом

Comments

[Jack]

не совсем понял про маску

[Vitaliy]

Jack, mix-blend-mode

Answer 4

[Ilya Muromtsev]

А как у тебя?

Comments

[Jack]

вот так:

[Jack]

и если делать отдельными строками, то вот так: