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

Written by Stefan Judis
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

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 6 days ago.
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