CSS Verlaufsrahmen-Generator
CSS-Verlaufsrahmen-Code sofort mit Live-Vorschau generieren.
135°
0%
100%
Vorschau
CSS-Code
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Was ist ein CSS-Verlaufsrahmen?
CSS unterstützt keine Verlaufsfarben für border-color. Dieses Tool verwendet den background-clip-Trick — zwei Hintergründe werden auf padding-box bzw. border-box zugeschnitten und überlagert.
Verlaufstypen
Linearer Verlauf
Farben gehen in gerader Linie im angegebenen Winkel über. Ideal für direktionale Rahmeneffekte wie von oben nach unten oder diagonal.
Konischer Verlauf
Farben rotieren um einen Mittelpunkt. Am Rahmen angewendet entsteht ein Regenbogeneffekt, der das gesamte Element umrundet.
Anleitung
Wählen Sie einen Verlaufstyp (Linear oder Konisch), stellen Sie Winkel und Farbstopps ein, passen Sie Rahmenbreite und -radius an und kopieren Sie den generierten CSS-Code.
Häufig gestellte Fragen
Kann ich einen Verlauf direkt auf border-color anwenden?
Nein. CSS border-color unterstützt nur Vollfarben. Dieses Tool verwendet den background-clip-Trick, um Verlaufsrahmen ohne JavaScript zu erstellen.
Was ist der Unterschied zwischen linearen und konischen Verlaufsrahmen?
Lineare Verläufe fließen in eine Richtung (z.B. von oben nach unten). Konische Verläufe rotieren um das Element und zeigen alle Farben gleichmäßig entlang des gesamten Rahmens.
Wird es in allen Browsern unterstützt?
Die background-clip-Methode funktioniert in den aktuellen Versionen von Chrome, Firefox, Safari und Edge. Internet Explorer wird nicht unterstützt.
Wie verwende ich Verlaufsrahmen mit Tailwind CSS?
Tailwind unterstützt Verlaufsrahmen nicht nativ. Fügen Sie das generierte CSS zu @layer utilities hinzu oder verwenden Sie es als Inline-Style.
Was ist ein konischer Verlaufsrahmen?
Ein konischer Verlaufsrahmen wendet Farben an, die sich um einen Mittelpunkt drehen, und erzeugt Regenbogen- oder Rotationseffekte.
Kann ich einen Verlaufsrahmen animieren?
Ja. Sie können den Winkel von conic-gradient mit @keyframes und CSS-Variablen animieren, um einen rotierenden Verlaufsrahmen zu erstellen.