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.
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.
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
- How to escape CSS selectors in JavaScript
- Why do visually hidden CSS classes define a size of 1x1?
- A ::selection web compatibility issue
- New on the web: How to detect disabled JavaScript in CSS
- Size container queries can detect landscape / portrait orientation
About the author
Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.