How is it done – A gradient border with a single element

1 min read

It took me a while to figure out how CSS Tricks do these fancy looking gradient borders in their new redesign. And because I want to sharpen my design skills I made a sketch explaining how it works.

Partially related: background clip is configurable for every background gradient separately.

You can play around with it on CodePen.

Graphical explanation on how CSS tricks creates the illusion of gradient borders with one pseudo element and several gradients