Select Page

Category: gradients

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 (, but with a gradient that doesn’t reset for each line? — 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-break is 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....

Read More

Gradient Borders in CSS

Let’s say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this. I’ll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it. Perhaps like this: See the Pen Gradient with Wrapper by Chris Coyier (@chriscoyier) on CodePen. If you hate the idea of a wrapping element, you could use a pseudo-element, as long as a negative z-index value is OK (it wouldn’t be if there was much nesting going on with parent elements with their own backgrounds). Here’s a Stephen Shaw example of that, tackling border-radius in the process: See the Pen Gradient border + border-radius by Shaw (@shshaw) on CodePen. You could even place individual sides as skinny pseudo-element rectangles if you didn’t need all four sides. But don’t totally forget about border-image, perhaps the most obtuse CSS property of all time. You can use it to get gradient borders even on individual sides: See the Pen Gradient Border on 2 sides with border-image by Chris Coyier (@chriscoyier) on CodePen. Using both border-image and border-image-slice is probably the easiest possible syntax for a gradient border, it’s just incompatible with border-radius, unfortunately. See the Pen CSS Gradient Borders by Chris Coyier (@chriscoyier) on CodePen. The post Gradient Borders...

Read More

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My version of the rainbow gradient infinity. The gradient doesn’t look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let’s see how I...

Read More

Radial Gradient Recipes

Radial gradients are pretty dang cool. It’s amazing we can paint the background of an element with them so easily. Easily is a relative term though. It’s certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable. But it’s also not that easy to remember if you don’t use it often, and it’s more complicated than linear-gradient(). I figured I’d put together a page of reference examples, so if you know what you need but forget the syntax, it’s easy to find that starter code example here....

Read More