Multi-Line Inline Gradient
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:
See the Pen Multiline Padding with box-decoration-break by Chris Coyier (@chriscoyier) on CodePen.
But a gradient on there is gonna get weird on multiple lines:
See the Pen Multiline Padding with box-decoration-break by Chris Coyier (@chriscoyier) on CodePen.
I’m gonna credit Matthias Ott, from that thread, with what looks like the perfect answer to me:
See the Pen Multiline background gradient with mix-blend-mode by Matthias Ott (@matthiasott) on CodePen.
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.
The post Multi-Line Inline Gradient appeared first on CSS-Tricks.
