How to make background c with a gradient along the boundaries of the text?

Hello, on the screenshot the design of the unit
take.ms/OY0Ok
The text background with gradient, text can be multiple lines and change.
Without a gradient made with no problems. Here's how to make a gradient?

This is without the gradient. And that is not quite as it should. But the gradient is not working
https://codepen.io/Marcia59/pen/oVKaxx
March 19th 20 at 09:06
3 answers
March 19th 20 at 09:08
Solution
It seems that the only working option to realize such a gradient in CSS is to play with a property mix-blend-mode and do folbic for older browsers. Something like this:

But this method is not universal, we have to ask the background of the parent element. So I would like to draw attention to your designer at this point and discussed alternative design options.
Awesome, thank you very much. Yes, the designers said. We agreed that doing without a gradient, but I was wondering how to implement it though. - Marcia59 commented on March 19th 20 at 09:11
March 19th 20 at 09:10
How to make the background gradient I know, look at the screenshot that is required. - Marcia59 commented on March 19th 20 at 09:13
March 19th 20 at 09:12
All gorgeous, but I need the text in one tag, this option is unfortunately not suitable, because the text is generated and may vary depending on the headline news. So and I did), the problem is that 1 tag gradine and borders - Marcia59 commented on March 19th 20 at 09:15
:after use, no? - flavie.Senger commented on March 19th 20 at 09:18
Where and for what? not quite understand You. Edited the question, added the link as implemented now - Marcia59 commented on March 19th 20 at 09:21

Find more questions by tags LayoutHTMLCSS