background clip is configurable for every background gradient separately

This post is part of my Today I learned series in which I share all my learnings regarding web development.

Today, I looked at a CodePen created by Ana Tudor. Chris Coyier included this pen in an article about the new CSS-tricks redesign to explain how they created a particular UI-element.

What I thought was fascinating about the above element is that Ana used only a single HTML element to create it.

< nav id = " css " > </ nav >

I created a new Pen and started rebuilding the same UI-element to understand how Ana had built it. The scss code to build this element is forty lines long, but most of the magic happens inside of the background property.

#css { background : linear-gradient ( #333 , #222 ) padding-box , linear-gradient ( 90deg , #db1d60 , #ed4f32 ) 0/ 50% no-repeat border-box , linear-gradient ( -90deg , #eb7d01 , #ed4f32 .5*65vw , rgba ( #ed4f32 , 0 ) ) 100% 101%/ 65% 75% no-repeat border-box ; }

These lines are a lot to grasp, and it inevitably takes a moment (or a few more in my case) to understand what's going on in there, but what surprised me immediately was the first gradient definition.

linear-gradient(#333, #222) padding-box

Wait a second? Can you define background-clip for every single gradient inside of the background property?

It turns out you can!

(... and I felt like I understood a tiny bit more how all these creative developers make impressive artwork with "just a few gradients")

You can use the background property with different gradients and background-clips to create colorful borders. With a combination of border-box , padding-box , and content-box you can even style two different borders without any pseudo-elements. 🎉

#css { padding : .25em ; border : .25em solid transparent ; background : linear-gradient ( to bottom , #fff , #bbb ) content-box , linear-gradient ( to right , #e94332 , #a91302 ) padding-box , linear-gradient ( to right , #0867a6 , #4aa9e8 ) border-box ; }

(you can play around with the above example on CodePen)

If you want to know more about the background-clip property, content-box or padding-box – Ana Tudor wrote a massive article on CSS-tricks about precisely this topic.

Additionally, if you're interested in how to create gradient borders, just recently there was an article published (also on CSS-tricks) covering this topic.

Enjoy!