Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

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

UI-element with gradient borders and a long outline to the lest

It's fascinating that Ana used only a single HTML element to create this effect.

<!-- this is all the markup ๐Ÿ˜ฒ -->
<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 {
  /* ... */
    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.

What immediately stood out was the first gradient definition, though.

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")

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 defines the width of the red gradient background (2) */
  padding: .25em;

  /* border-width defines the width the blue gradient background (3) */
  border: .25em solid transparent;

    /* (1) most inner gradient */
    linear-gradient(to bottom, #fff, #bbb) content-box,
    /* (2) red gradient */
    linear-gradient(to right, #e94332, #a91302) padding-box,
    /* (3) blue gradient */
    linear-gradient(to right, #0867a6, #4aa9e8) border-box;

Single button element including three gradients

(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.

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


Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 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