background-clip & background-origin

background-clip & background-origin

Fine-tune WHERE a background sits relative to the box.

background-clip: where the paint ends

.el {
  background-color: #04aa6d;
  background-clip: border-box;    /* under the border (default) */
  background-clip: padding-box;   /* stops at the padding edge */
  background-clip: content-box;   /* only inside content */
  background-clip: text;          /* paint INTO the text! */
}

The classic text-gradient trick

h1 {
  background: linear-gradient(90deg, #f857a6, #ff5858);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Gradient text without images!

background-origin: where the position starts

.el {
  background-origin: border-box;
  background-origin: padding-box;   /* default */
  background-origin: content-box;
}

Origin affects how background-position anchors (usually with background-image).

Remember

• clip = where the background is CUT.
• origin = where positioning is MEASURED from.

TL;DR

• background-clip: border-box | padding-box | content-box | text.
• background-clip: text + transparent color = gradient text.
• background-origin sets the reference for background-position.
• Great for lettering and card accents.