Verlaufsrahmen-Generator (CSS)
Wähle die Farben, die Stärke und die Ecken. Der Code nutzt zwei Hintergrundebenen, die Methode, die border-radius funktionieren lässt.
So geht’sFarbiger Rahmen mit Verlauf
Verfügbar auf: 
Verlaufsrahmen-Generator (CSS): wofür es gut ist
Der naheliegende Weg zu einem Rahmen mit Verlauf, border-image, ignoriert die abgerundeten Ecken. Dieser Generator nutzt die Technik mit zwei Hintergrundebenen (padding-box und border-box), die border-radius beibehält, oder eine Maske mit mask-composite, wenn die Karte einen transparenten Hintergrund haben muss.
Wähle zwei oder drei Farben, den Winkel, die Stärke und die Ecken und optional den rotierenden Rahmen, gebaut mit conic-gradient und einer mit @property registrierten Winkelvariable, ausgeschaltet für alle, die weniger Bewegung wünschen.
So geht’s
- Wähle die Farben und den Winkel.
- Passe Stärke, Ecken und Hintergrund an.
- Kopiere das CSS und wende die Klasse an.
Wann nutzen
- Hervorgehobene Tarifkarte.
- Profilfoto mit farbigem Rahmen.
- Haupt-Button für den Aufruf.
Häufige Fragen
Warum nicht border-image nutzen?
Mit border-image funktioniert der Verlauf, aber die abgerundeten Ecken (border-radius) werden ignoriert. Die Technik dieses Generators malt den Verlauf als zweite Hintergrundebene, die nur im Bereich des Rahmens erscheint, und so bleiben die Ecken rund.
Und wenn der Hintergrund der Karte transparent ist?
Aktiviere die Option transparenter Hintergrund: Der Code nutzt dann eine Maske (mask), um die Mitte auszuschneiden, und was hinter der Karte liegt, erscheint innerhalb des Rahmens.
Wie funktioniert der rotierende Rahmen?
Der Verlauf ist konisch, und der Winkel ist eine mit @property registrierte Variable, die CSS animieren kann. Für alle, die weniger Bewegung wünschen, ist die Animation ausgeschaltet.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.