Skip to main content
CSS is fun and cool and I like it.

Nested Gradients with background-clip

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.… Read article “Nested Gradients with background-clip”


Multiple Background Clip


The `background-clip` Property and its Use Cases

background-clip is one of those properties I’ve known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn’t even use pseudo-elements on … Read article “The `background-clip` Property and its Use Cases”



background-clip lets you control how far a background image or color extends beyond an element’s padding or content.

.frame {
  background-clip: padding-box;
  • border-box is the default value. This allows the background to extend all the way to the outside edge of the element’s border.
  • padding-box clips the background at the outside edge of the element’s padding and does not let it extend into the border.
  • content-boxclips the background at the edge of the content box.
  • inherit applies
Read article “background-clip”