Gradient Multiline Padded Text
For whatever reason a question from Dan Mall from 2018 popped up in my timeline where he was asking how to create multiline padded text with a consistent gradient background in CSS:
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
Here is my take:
Link to Codepen
The trick is to set
fixed, so that it uses the viewport instead of the element (or rather inline fragments) as its reference. That keeps the background from resetting in each line and also from starting at different origins for each line.
The second relevant setting is
box-decoration-break: clone, which repeats the padding on every line, instead of applying
padding-left only in the first and
padding-right only in the last line.
Try commenting out both properties in the Codepen to see the differences.
Important caveat: The background will only spread as far as the size of the viewport. If you need to style text in such a way, but below the fold, you're out of luck. So this only works well with the main headline.
No mentions yet.