`background-clip (inclusiv text cu gradient)` în CSS

Culori, fundaluri și text CSS3+

Stabilește până unde se întinde fundalul: sub bordură, doar în padding, doar în conținut sau numai în interiorul literelor.

Sintaxă CSS

background-clip: border-box;   /* implicit */
background-clip: padding-box;
background-clip: content-box;
background-clip: text;         /* fundalul se vede doar prin litere */

Ce face `background-clip (inclusiv text cu gradient)`

Implicit fundalul (culoare sau imagine) se desenează și sub bordură. background-clip îl poate limita la zona de padding sau doar la zona de conținut.

Valoarea text taie fundalul după forma literelor. Cu color: transparent, textul pare colorat cu gradientul sau cu imaginea de fundal. Varianta fără prefix funcționează în Chrome 120, Firefox și Safari 14; pentru browsere mai vechi scrie și -webkit-background-clip: text.

Valori uzuale

Valoare	Descriere
`border-box`	Fundalul ajunge până la marginea exterioară a bordurii (implicit).
`padding-box`	Fundalul se oprește la marginea interioară a bordurii.
`content-box`	Fundalul acoperă doar zona de conținut, fără padding.
`text`	Fundalul este vizibil doar prin litere.

Exemple

Exemplul 1: Titlu cu text în gradient

Gradientul de fundal este tăiat după litere, iar culoarea textului devine transparentă.

.titlu-gradient {
  background-image: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: 800;
}

Efect vizual în browser

Textul „Black Friday -40%” trece de la albastru în stânga la roz în dreapta; fundalul din jurul literelor rămâne alb.

Exemplul 2: Bordură semitransparentă care nu se amestecă cu fundalul

Cu padding-box, culoarea de fundal nu se vede prin bordura semitransparentă.

.card {
  background-color: #fde68a;
  border: 8px solid rgba(0, 0, 0, 0.15);
  background-clip: padding-box;
}