background-clip

background-clip bestimmt, wie weit sich der Hintergrund (Farbe oder Bild) eines Elements ausdehnt – bis zur Aussenkante des Borders, bis zur Innenkante des Borders, nur bis zum Inhalt oder sogar nur innerhalb der Textzeichen selbst.

---

Werte

• border-boxHintergrund reicht bis zur Aussenkante des Borders (Standard)
• padding-boxHintergrund endet an der Innenkante des Borders
• content-boxHintergrund endet an der Innenkante des Paddings
• textHintergrund wird nur innerhalb der Textzeichen sichtbar

.element {
    background-clip: border-box; /* Standard */
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;
}

---

Box-Werte im Vergleich

Der gestrichelte Rahmen ist bei allen drei Boxen identisch – nur die Ausdehnung des Verlaufs dahinter ändert sich.

.box {
    padding: 20px;
    border: 10px dashed rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, darkblue, deeppink);
}

.border-box  { background-clip: border-box; }  /* füllt bis unter den Border */
.padding-box { background-clip: padding-box; } /* endet vor dem Border */
.content-box { background-clip: content-box; } /* endet vor dem Padding */

Hinweis: Bei border-box scheint der Verlauf durch die Lücken eines gestrichelten oder gepunkteten Borders sichtbar – bei padding-box und content-box nicht.

---

Gradient Text

Der bekannteste Einsatz von background-clip: ein Farbverlauf, der nur innerhalb der Buchstaben sichtbar wird. Der Text selbst wird transparent gemacht, damit der Hintergrund durchscheint.

.text {
    background: linear-gradient(135deg, darkblue, darkmagenta, magenta, deeppink);
    -webkit-background-clip: text;   /* Safari braucht das Präfix */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

Wichtig: Ohne -webkit-text-fill-color: transparent; bleibt der Text in Safari sichtbar und überdeckt den Verlauf.

---

Foto-Text

Anstelle eines Farbverlaufs funktioniert auch ein echtes Foto als background – die Buchstaben werden zum Fenster auf das Bild dahinter.

.text {
    background: url('figuren.jpg') center/cover;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

---

Pattern-Text

Nicht nur Farbverläufe funktionieren – jeder background-Wert lässt sich auf Text anwenden, auch Streifenmuster.

.text {
    background: repeating-linear-gradient(45deg, deeppink 0 10px, darkmagenta 10px 20px);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

---

Gradient-Rahmen

Mit zwei Hintergründen und unterschiedlichem background-clip lässt sich ein Rahmen mit Farbverlauf erzeugen – ganz ohne Bild oder border-image.

.card {
    border: 6px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, darkblue, deeppink) border-box;
}

Die erste Ebene (padding-box) füllt die Karte weiss, die zweite Ebene (border-box) ist nur im Border-Bereich sichtbar – dadurch entsteht der farbige Rahmen.

---

background-clip vs. clip-path

• background-clipSchneidet nur den Hintergrund – Inhalt und Border bleiben unberührt
• clip-pathSchneidet das ganze Element inklusive Inhalt, Border und Box-Shadow

Für Formen wie Kreise, Polygone oder SVG-Pfade brauchst du clip-path – siehe die clip-path-Lektion. background-clip ist spezialisiert auf Hintergrund und Text.

---

Kurz gesagt

• background-clip bestimmt, bis zu welcher Box der Hintergrund gezeichnet wird.
• border-box, padding-box und content-box steuern die Box-Grenze.
• text clippt den Hintergrund auf die Buchstabenform – der Klassiker für Gradient-Überschriften.
• Bei Gradient-Text braucht es zusätzlich color: transparent bzw. -webkit-text-fill-color: transparent.
• Zwei Hintergrundebenen mit unterschiedlichem Clip erzeugen Gradient-Rahmen ohne Bild.
• Für Formen (Kreise, Polygone, SVG) ist clip-path das richtige Werkzeug, nicht background-clip.

---

Elemente zuschneiden mit clip-path.

---