CSS-Farbverlaufsrahmen: vier Wege, einen zu zeichnen

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 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.

.panel {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}

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.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}

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.

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.

.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;
}

pointer-events: none verhindert, dass das Pseudoelement Klicks schluckt, die für den Inhalt der Karte gedacht sind. Die MDN-Referenz zu mask-composite erklärt die Kompositions-Schlüsselwörter. Diese Methode steckt hinter den meisten 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.

@property --angle {
  syntax: "<angle>";
  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; }
}

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.

Designtipps für Verlaufsrahmen

Verlaufsrahmen wirken am besten als Betonung. Dieselbe Logik gilt für Buttons, behandelt in Farbverlauf-Buttons in CSS.