Came across this thread:
CSS superfriends! Have you seen examples of how to do multi-line padded text like this article on @css (https://t.co/2j8p4jmaT4), but with a gradient that doesn’t reset for each line? pic.twitter.com/MVPdAjxt1W
— Dan Mall (@danmall) December 3, 2018
My first thought process was:
- The lines are padded, and that’s tricky enough to pull off.
box-decoration-breakis probably our friend here.
But it turns out we need a litttttle extra trickery to make it happen.
If a solid color is fine, then some padding combined with
box-decoration-break should get the basic framework:
But a gradient on there is gonna get weird on multiple lines:
I’m gonna credit Matthias Ott, from that thread, with what looks like the perfect answer to me:
The trick there is to set up the padded multi-line background just how you want it with pure white text and a black background. Then, a pseudo-element is set over the whole area with the gradient in the black area. Throw in
mix-blend-mode: lighten; to make the gradient only appear on the black area. Nice one.