background clip is configurable for every background gradient separately (#tilPost)

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.


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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.

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

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

<!-- 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 {
  /* ... */
  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 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;

  background: 
    /* (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.

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!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-08T15:22:22+00:00) » background clip is configurable for every background gradient separately (#tilPost). Retrieved from https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/.
MLA
" » background clip is configurable for every background gradient separately (#tilPost)." Stefan Judis | Sciencx - Friday January 18, 2019, https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/
HARVARD
Stefan Judis | Sciencx Friday January 18, 2019 » background clip is configurable for every background gradient separately (#tilPost)., viewed 2022-12-08T15:22:22+00:00,<https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » background clip is configurable for every background gradient separately (#tilPost). [Internet]. [Accessed 2022-12-08T15:22:22+00:00]. Available from: https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/
CHICAGO
" » background clip is configurable for every background gradient separately (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-08T15:22:22+00:00. https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/
IEEE
" » background clip is configurable for every background gradient separately (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/. [Accessed: 2022-12-08T15:22:22+00:00]
rf:citation
» background clip is configurable for every background gradient separately (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2019/01/18/background-clip-is-configurable-for-every-background-gradient-separately-tilpost/ | 2022-12-08T15:22:22+00:00
https://github.com/addpipe/simple-recorderjs-demo