I can’t say I use
background-clip all that often. I’d wager it’s hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to a post over here by Ana Tudor.
Here’s a quick explanation.
You’ve probably seen this thing a million times:
That’s showing you the size and position of an element, as well as how that size is made up: content size, padding, margin, and border.
Those things aren’t just theoretical to help with understanding and debugging. Elements actually have a content-box, padding-box, and border-box. Perhaps we encounter that most often when we literally set the
box-sizing property. (It’s tremendously useful to universally set it to
Those values are the same values as
background-clip uses! Meaning that you can set a background to only cover those specific areas. And because multiple backgrounds is a thing, that means we can have multiple backgrounds with different clipping on each.
See the Pen
Multiple background-clip by Chris Coyier (@chriscoyier)
But that’s boring and there are many ways to pull off that effect, like using borders,
box-shadow or any combination of them.
What is more interesting is the fact that those backgrounds could be gradients, and that’s a lot harder to pull off any other way!
See the Pen
Nested Gradients by Chris Coyier (@chriscoyier)
Thanks for your time and effort. That’s really helpful and informative
Cool, it even works with boarder-radius…..
That’s a good one! Thank you for sharing this!!
this looks amazing, Ive never used the property before. Now I’m gonna play with it.
All fun and games until you need that button to have a transparent background and also gradient borders haha