# CSS-Farbverlaufsrahmen: vier Wege, einen zu zeichnen [Canonical HTML page](https://gradiently.design/de/guide/css-gradient-border) border-color nimmt keinen Farbverlauf an, daher ist jede Verlaufskontur eine Behelfslösung. Hier die vier, auf die es ankommt, was jede kann und was nicht und wonach du greifst. ## The short version - CSS kann keinen Farbverlauf in border-color setzen, ein CSS-Farbverlaufsrahmen wird also immer mit einer anderen Technik gezeichnet. - border-image mit einem Farbverlauf ist die kürzeste Methode, ignoriert aber border-radius und eignet sich daher nur für eckige Ecken. - Zwei Hintergrundebenen, eine auf die Padding-Box und eine auf die Border-Box begrenzt, ergeben einen abgerundeten Verlaufsrahmen, solange das Innere einfarbig ist. - Die Masken-Technik schneidet die Mitte aus einer Verlaufsebene, was einen abgerundeten Verlaufsrahmen mit transparentem Inneren ergibt. - Ein rotierender conic gradient, gesteuert von einer mit @property registrierten benutzerdefinierten Eigenschaft, ist der übliche Weg, einen Verlaufsrahmen zu animieren. Ein **CSS-Farbverlaufsrahmen** ist eine Kontur, deren Farbe entlang ihrer Länge überblendet. Der Haken: `border-color` nimmt nur Farben an, keine Bilder, es gibt also keine einzelne Eigenschaft dafür. Stattdessen zeichnest du den Verlauf woanders und zeigst nur ein dünnes Band davon. Dafür gibt es vier verlässliche Wege, und der richtige hängt von zwei Fragen ab: Hat das Element runde Ecken, und muss sein Inneres transparent sein? | Methode | Runde Ecken | Transparentes Inneres | Am besten für | | --- | --- | --- | --- | | `border-image` | Nein | Ja | Eckige Karten, Trenner, Tabellen | | Zwei Hintergründe | Ja | Nein, braucht eine einfarbige Füllung | Die meisten Karten und Buttons | | Maske auf einem Pseudoelement | Ja | Ja | Karten über Bildern oder Farbverläufen | | Pseudoelement dahinter | Ja | Nein | Leuchteffekte und animierte Ringe | Wähle nach den zwei Fragen: Ecken und Inneres. - Violett bis Cyan: `linear-gradient(135deg, #7c3aed, #22d3ee)` - Mandarine bis Magenta: `linear-gradient(135deg, #f97316, #db2777)` - Limette bis Petrol: `linear-gradient(135deg, #a3e635, #0d9488)` - Silberkante: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)` Farbverläufe, die als dünne Konturen gut wirken. Hohe Sättigung zählt bei einer 2-px-Linie mehr als bei einem ganzen Hintergrund. ## Methode 1: border-image `border-image` nimmt jedes Bild an, auch einen Farbverlauf. Lege Rahmenbreite und -stil fest, dann den Verlauf und dann einen Slice von `1`, der dem Browser sagt, das ganze Bild als Rand zu verwenden. Es sind zwei Zeilen, es funktioniert überall und lässt das Innere des Elements unberührt. ```css .panel { border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1; } ``` Der kürzeste Verlaufsrahmen. Die `1` ist der Slice-Wert; ohne sie wird der Rahmen nur in den Ecken gezeichnet. > **Keine runden Ecken** Bei `border-image` beschneidet `border-radius` zwar den Hintergrund, aber der Rahmen selbst bleibt eckig. Muss das Element abgerundet sein, nimm eine der anderen Methoden. ## Methode 2: zwei Hintergründe mit background-clip Gib dem Element einen transparenten Rahmen und staple dann zwei Hintergründe. Die obere Ebene ist die innere Füllung, auf die `padding-box` begrenzt, sie endet also am Innenrand des Rahmens. Die untere Ebene ist der Verlauf, auf die `border-box` begrenzt, er reicht also unter den Rahmen. Wo die Füllung endet, scheint der Verlauf durch, und er folgt `border-radius` perfekt. ```css .card { border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#0f172a, #0f172a) padding-box, linear-gradient(135deg, #7c3aed, #22d3ee) border-box; } ``` Die Füllung ist als einfarbiger Farbverlauf geschrieben, weil sich nur Bilder so stapeln lassen. Das ist die Methode, nach der du standardmäßig greifst. Ihre einzige Grenze: Das Innere muss deckend sein, da eine transparente Füllung den Verlauf über die ganze Karte zeigen würde. Für Karten auf einer einfarbigen Seitenfarbe ist das gar keine Grenze: Nimm die Seitenfarbe als Füllung. > **Warum die Kurzschreibweise zählt** Schreibst du `border-box` einmal in der Kurzschreibweise `background`, setzt das sowohl `background-origin` als auch `background-clip`, sodass der Verlauf auf den äußeren Rand bemessen wird. Setzt du nur `background-clip: border-box` einzeln, wird der Verlauf auf die Padding-Box bemessen und wiederholt sich unter dem Rahmen, sodass dünne Streifen der falschen Farbe an den Kanten bleiben. ## Methode 3: die Masken-Technik für transparente Innenflächen Liegt die Karte über einem Foto oder einem anderen Farbverlauf, muss die Mitte durchsichtig sein. Lege den Verlauf auf ein Pseudoelement, das die Karte bedeckt, gib ihm Padding in der Breite des Rahmens und maskiere es dann mit zwei Ebenen: eine, die nur die Content-Box bedeckt, und eine, die alles bedeckt. Zieht man die eine von der anderen ab, bleibt nur der Padding-Ring sichtbar. ```css .glass-card { position: relative; border-radius: 16px; } .glass-card::before { content: ""; position: absolute; inset: 0; padding: 2px; /* border width */ border-radius: inherit; background: linear-gradient(135deg, #7c3aed, #22d3ee); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; } ``` Ein Verlaufsring mit transparenter Mitte. Das Präfixpaar deckt ältere WebKit-Versionen ab; die Standardzeile `mask` alles Aktuelle. `pointer-events: none` verhindert, dass das Pseudoelement Klicks schluckt, die für den Inhalt der Karte gedacht sind. Die [MDN-Referenz zu mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) erklärt die Kompositions-Schlüsselwörter. Diese Methode steckt hinter den meisten [Glassmorphism](https://gradiently.design/de/guide/glassmorphism)-Karten mit leuchtenden Kanten. ## Methode 4: ein Pseudoelement dahinter, für Leuchten und Animation Setze ein Verlaufs-Pseudoelement, etwas größer als die Karte, hinter ihren Inhalt und bedecke die Mitte mit einem zweiten Pseudoelement, das die einfarbige Füllung der Karte trägt. Der sichtbare Rand ist der Verlauf. Weil der Verlauf auf einer eigenen Ebene liegt, kannst du eine Kopie davon für ein Leuchten weichzeichnen oder ihn rotieren lassen. ```css @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } .ring { position: relative; isolation: isolate; border-radius: 16px; } .ring::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 18px; background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed); animation: spin 6s linear infinite; } /* the card's fill, painted over the middle of the ring */ .ring::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #0f172a; } @keyframes spin { to { --angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .ring::before { animation: none; } } ``` Ein animierter Verlaufsrahmen. Das registrierte `--angle` lässt den Browser den Startwinkel des conic gradient flüssig interpolieren, und `::after` malt die Füllung über die Mitte. Der Verlauf des rotierenden Rings: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)` Die Wiederholung der ersten Farbe am Ende verbirgt die Naht beim Drehen. [CSS conic gradients](https://gradiently.design/de/guide/css-conic-gradient) behandelt die Funktion im Detail. Der äußere Radius sollte dem inneren Radius plus der Rahmenbreite entsprechen, weshalb das Pseudoelement 18 px um eine 16-px-Karte nutzt. Weitere Wege, Farbverläufe in Bewegung zu bringen, siehe [animierte CSS-Farbverläufe](https://gradiently.design/de/guide/css-animated-gradient). ## Designtipps für Verlaufsrahmen ### Vermeiden - Verlaufsrahmen an jeder Karte in einem Raster - Wenig gesättigte Verläufe auf einer 1-px-Linie, die grau wirken - Ein Verlaufsrahmen und eine Verlaufsfüllung am selben Element - Schnell drehende Ringe an Inhalten, die man lesen muss ### Besser - Die Verlaufskante für ein hervorgehobenes Element reservieren, etwa einen empfohlenen Tarif - 2 px oder mehr und gesättigte Stopps nutzen - Eine ruhige Füllung mit lebhafter Kante oder umgekehrt - Langsame Drehung, bei reduzierter Bewegung angehalten Verlaufsrahmen wirken am besten als Betonung. Dieselbe Logik gilt für Buttons, behandelt in [Farbverlauf-Buttons in CSS](https://gradiently.design/de/guide/css-gradient-button). ## FAQ ### Wie mache ich einen Farbverlaufsrahmen in CSS? Am schnellsten mit `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Für runde Ecken nutze zwei Hintergründe, begrenzt auf `padding-box` und `border-box`. ### Warum funktioniert border-radius nicht mit border-image? Laut Spezifikation wird ein mit `border-image` gezeichneter Rahmen von `border-radius` nicht abgerundet. Nutze für runde Verlaufsrahmen die Methode mit background-clip oder Maske. ### Wie mache ich einen Verlaufsrahmen mit transparentem Hintergrund? Nutze die Masken-Technik: ein Pseudoelement mit dem Verlauf, Padding in der Breite des Rahmens und eine Maske, die seine Content-Box ausschließt. ### Wie animiere ich einen Verlaufsrahmen? Registriere einen Winkel mit `@property`, nutze ihn als `from`-Winkel eines conic gradient auf einem Pseudoelement und animiere diese Eigenschaft von 0deg auf 360deg. ### Welche Methode für Verlaufsrahmen sollte ich nutzen? Nimm zwei Hintergründe für die meisten runden Karten und Buttons, `border-image` für eckige Kanten und die Masken-Technik nur, wenn das Innere transparent bleiben muss.