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:

See the Pen Gradient Multiline Padded Text by Christian Schaefer (@Schepp) on CodePen.

Link to Codepen

The trick is to set background-attachment to 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.

← Home