CSS-Farbverlauf-Generator
Gestalte einen Hintergrundverlauf visuell und kopiere fertiges CSS. Ziehe die Farbstopps an der Leiste entlang, klicke auf die Leiste, um einen Stopp hinzuzufügen, ändere den Winkel oder den Mittelpunkt und mach Farben transparent. Der Code enthält eine einfarbige Ersatzfarbe für alte Browser.
So wird er benutzt
- Wähle linear, radial oder konisch oder starte mit einer Vorlage oder einem zufälligen Verlauf.
- Klicke auf einen Stopp, um Farbe, Deckkraft und Position zu bearbeiten; ziehe ihn oder klicke auf die Leiste, um einen weiteren hinzuzufügen.
- Kopiere das CSS und füge es in die Regel des Elements ein.
Häufige Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf wechselt die Farbe entlang einer Geraden im gewählten Winkel. Ein radialer Verlauf breitet sich von einem Mittelpunkt kreis- oder ellipsenförmig aus. Ein konischer Verlauf dreht sich um einen Mittelpunkt wie die Zeiger einer Uhr, was für Farbkreise und Tortendiagramme nützlich ist.
Funktionieren CSS-Verläufe in allen Browsern?
Ja. Lineare, radiale und konische Verläufe funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari ohne Präfixe. Die erste background-Zeile ist eine einfache Farbe, die nur sehr alte Browser verwenden.
Wie mache ich Streifen?
Setze am Anfang und am Ende jedes Streifens zwei Stopps in derselben Farbe, damit die Farbe abrupt wechselt, statt zu verlaufen, und aktiviere Wiederholen. Die letzte Vorlage ist ein Beispiel.
🏷️ Meta-Tag-Generator
🖼️ Open-Graph-Generator
🔗 UTM-Link-Generator
🔲 CSS-Box-Shadow-Generator