Gradient-Border-Generator
Rahmen mit Farbverlauf und abgerundeten Ecken erstellen, optional transparent und animiert – mit Live-Vorschau und CSS-Code.
Der Gradient-Border-Generator erstellt Rahmen mit Farbverlauf, die auch mit abgerundeten Ecken funktionieren. Wahlweise mit gefüllter Innenfläche über zwei Hintergrundebenen oder mit transparenter Mitte per Maske. Auf Wunsch rotiert der Verlauf endlos um das Element. Fertig sind HTML und CSS mit Live-Vorschau.
Farbstopps
<div class="gradient-border">
<h3>Karte mit Verlaufsrahmen</h3>
<p>Funktioniert auch mit abgerundeten Ecken.</p>
</div>Verlaufsrahmen mit runden Ecken
Der Trick nutzt mehrere Hintergrundebenen mit unterschiedlichem background-clip: Die obere Ebene ist einfarbig und reicht nur bis zur padding-box, die untere ist der Verlauf und reicht bis zur border-box. Der Rahmen selbst ist transparent.
| Variante | Technik | Wann |
|---|---|---|
| Gefüllt | Zwei Hintergründe, padding-box / border-box | Karten auf einfarbigem Grund |
| Transparent | Pseudo-Element mit mask-composite: exclude | Über Bildern und Mustern |
| Animiert | @property + conic-gradient | Hervorgehobene Elemente |
Rahmen aus Bildern erstellst du im Border-Image-Generator, Verläufe für Flächen im Gradient-Generator.
Häufige Fragen
Warum nicht einfach border-image?
border-image ignoriert border-radius, die Ecken bleiben eckig. Der Generator legt deshalb zwei Hintergründe übereinander: die Innenfarbe bis zur padding-box und den Verlauf bis zur border-box. Der transparente Rahmen lässt den Verlauf durchscheinen.
Wann brauche ich die transparente Variante?
Wenn hinter der Karte ein Bild oder Muster sichtbar bleiben soll. Dann zeichnet ein Pseudo-Element den Verlauf, und eine Maske mit mask-composite: exclude stanzt die Mitte aus.
Wie funktioniert die Animation?
Ein konischer Verlauf startet beim Winkel --border-angle. Mit @property wird diese Variable als Winkel registriert und lässt sich deshalb per Keyframes von 0 bis 1turn animieren. Browser ohne @property zeigen einen stehenden Verlauf.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.