Published at
Updated at
Reading time
1min

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

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles