CSS-Verlauf-Generator: lineare, radiale & konische Gradients
Erstelle lineare, radiale und konische CSS-Verläufe mit Live-Vorschau und kopiere das CSS sofort. Kostenlos und vollständig in deinem Browser — alles, was du erstellst, verlässt dein Gerät nie.
So verwendest du dieses Werkzeug
- Wähle Gradiententyp, Richtung und Farbstopps.
- Sieh dir den Live-Gradienten in der Vorschau an und passe ihn nach Bedarf an.
- Kopiere den generierten CSS-Code in dein Stylesheet.
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);
Über CSS Gradient Generator
Der CSS-Verlauf-Generator ist ein visueller Editor zum Erstellen von linearen, radialen und konischen Gradients und zum direkten Kopieren des fertigen CSS in dein Stylesheet. Statt die Syntax der Farbstopps zu raten und die Seite zum Prüfen neu zu laden, stellst du Typ, Winkel und Farben ein, siehst die Live-Vorschau sofort aktualisiert und kopierst eine einsatzbereite background-Deklaration wie background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);. Er richtet sich an Frontend-Entwicklerinnen, Frontend-Entwickler und Designer, die einen präzisen Verlauf wollen, ohne die Syntax von Hand zu schreiben.
Der Editor unterstützt die drei CSS-Verlaufsfunktionen. Ein linearer Verlauf mischt Farben entlang einer geraden Linie, deren Richtung du mit einem Winkel von 0 bis 360 Grad festlegst. Ein radialer Verlauf mischt Farben kreisförmig von einem Mittelpunkt nach außen. Ein konischer Verlauf führt Farben um einen Mittelpunkt herum und nutzt ebenfalls einen Winkel, um die Startrichtung festzulegen. Den Farbverlauf baust du aus einer Liste von Stopps, jeder mit einer über ein natives Farbfeld gewählten Farbe und einer Position von 0 bis 100 Prozent; du kannst so viele Stopps hinzufügen, wie ein Verlauf braucht, und das Werkzeug behält mindestens zwei bei, damit immer ein Übergang gerendert wird.
Da die Vorschau von der CSS-Engine deines Browsers selbst auf einem echten Element gerendert wird, siehst du genau, wie der Verlauf in der Produktion aussehen wird, ohne Näherung durch eine separate Rendering-Bibliothek. Das erzeugte CSS ist eine einzelne standardkonforme background-Eigenschaft und funktioniert daher überall, wo CSS akzeptiert wird: Stylesheets, CSS-in-JS, Inline-Styles, Design-Token-Dateien oder Theme-Konfigurationen von Frameworks. Typische Anwendungen sind Hintergründe für Hero- und Inhaltsbereiche, Füllungen von Buttons und Karten, Overlay-Effekte und Platzhaltergrafiken.
Ein paar Hinweise sind wichtig. Der radiale Verlauf wird als kreisförmige Form ausgegeben und bietet keine elliptischen oder eigens dimensionierten Varianten, und konische Verläufe werden zwar in aktuellen Browsern gut unterstützt, in sehr alten aber möglicherweise nicht — prüfe daher deine Zielbrowser, wenn du die konische Ausgabe einsetzt. Das Werkzeug erzeugt eine einzelne, nicht wiederholende Verlaufsdeklaration, keine repeating-gradient-Muster oder mehrschichtig gestapelten Hintergründe. Alles läuft lokal in deinem Browser, sodass nichts von dem, was du erstellst, hochgeladen wird.
Häufig gestellte Fragen
- Welche Verlaufsarten kann ich erstellen?
- Drei. Ein linearer Verlauf führt Farben entlang einer geraden Linie über, deren Richtung du mit einem Winkel steuerst. Ein radialer Verlauf führt Farben kreisförmig von einem Mittelpunkt nach außen über. Ein konischer Verlauf führt Farben wie ein Farbrad um einen Mittelpunkt herum, wobei ein Winkel die Startposition festlegt. Alle drei entsprechen direkt den jeweiligen standardkonformen CSS-Verlaufsfunktionen.
- Kann ich mehr als zwei Farben in einem Verlauf verwenden?
- Ja. Der Verlauf wird aus einer Liste von Farbstopps gebaut, und du kannst so viele hinzufügen, wie du für mehrfarbige Übergänge und Bänder brauchst. Jeder Stopp hat seine eigene Farbe und eine Position von 0 bis 100 Prozent, sodass du Farben präzise entlang des Verlaufs platzieren kannst. Das Werkzeug behält mindestens zwei Stopps bei, damit immer ein Übergang gerendert wird.
- Wie steuere ich die Richtung des Verlaufs?
- Bei linearen und konischen Verläufen legst du einen Winkel von 0 bis 360 Grad fest, der bei linearen Verläufen die Linienrichtung und bei konischen die Startdrehung bestimmt. Radiale Verläufe gehen von einem Mittelpunkt aus und nutzen keinen Winkel. Die Live-Vorschau aktualisiert sich, während du den Winkel änderst, sodass du die genaue Ausrichtung einstellen kannst, bevor du das CSS kopierst.
- Kann ich die Ausgabe direkt in mein CSS einfügen?
- Ja. Das Werkzeug gibt eine vollständige, standardkonforme background-Deklaration aus, zum Beispiel background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);. Kopiere sie und füge sie in eine Stylesheet-Regel, ein CSS-in-JS-Style-Objekt, ein Inline-style-Attribut oder eine Design-Token-Datei ein. Für aktuelle Browser sind keine Vendor-Präfixe oder zusätzlicher Code nötig.
- Funktioniert der konische Verlauf in allen Browsern?
- Konische Verläufe werden in allen aktuellen Versionen der großen Browser unterstützt, kamen aber später hinzu als lineare und radiale Verläufe, sodass sehr alte Browser sie möglicherweise nicht rendern. Wenn du Altsysteme unterstützen musst, teste die konische Ausgabe gegen deine Browser-Matrix oder hinterlege eine Volltonfarbe oder einen linearen Verlauf als Fallback. Lineare und radiale Verläufe haben eine deutlich breitere historische Unterstützung.
- Ist die Vorschau genau das, was auf meiner Seite gerendert wird?
- Ja. Die Vorschau wird von der CSS-Engine deines Browsers auf einem echten Element gerendert, nicht von einer separaten Bild-Rendering-Bibliothek, sodass sie genau widerspiegelt, wie der Verlauf aussieht, wenn du dasselbe CSS ausspielst. Da das Rendering in Randfällen zwischen Browser-Engines leicht abweichen kann, ist es dennoch sinnvoll, das Endergebnis in deinen Zielbrowsern zu prüfen.
- Wird etwas von dem, was ich erstelle, an einen Server hochgeladen?
- Nein. Der Editor läuft vollständig in deinem Browser. Farben, Stopps und das erzeugte CSS bleiben auf deinem Gerät und werden nie irgendwohin gesendet, sodass du Verläufe auch für unveröffentlichte Designs bauen kannst, ohne sie offenzulegen.