Published at
Updated at
Reading time

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 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.