Kostenloser CSS-Verlaufs-Generator

Der Verlauf-Generator ist ein kostenloses Online-Tool mit einem visuellen Editor zum Erstellen schöner CSS-Verläufe, einschließlich linearer, radialer und konischer Stile.

Ja, er ist völlig kostenlos und erfordert keine Registrierung. Die gesamte Verlaufserstellung erfolgt clientseitig in deinem Browser.

Ja, der Verlauf-Generator liefert einsatzbereiten CSS-Code, den du direkt in deine Stylesheets kopieren und einfügen kannst.

Absolut. Der CSS-Verlauf-Generator verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.

Ja, der CSS-Verlauf-Generator ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ganz ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den CSS-Verlauf-Generator in deinem Browser und lege sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der CSS-Verlauf-Generator unterstützt gängige Bildformate wie PNG, JPG/JPEG, WebP und GIF. Je nach Tool können einige Funktionen auch SVG und BMP unterstützen.

Gib einfach deine Eingabe in das vorgesehene Feld ein, passe die Einstellungen nach Wunsch an, und das Tool verarbeitet sie sofort. Anschließend kannst du das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der CSS-Verlauf-Generator funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

Alle drei mischen Farben, unterscheiden sich aber in der Geometrie. Ein linearer Verlauf geht entlang einer geraden Linie in einem von dir festgelegten Winkel zwischen 0 und 360 Grad ineinander über, sodass Farben von oben nach unten, seitlich oder diagonal fließen. Ein radialer Verlauf breitet sich von einem Mittelpunkt kreis- oder ellipsenförmig nach außen aus, praktisch für Spotlight- oder Glow-Effekte, bei denen eine Farbe in der Mitte sitzt. Ein konischer Verlauf lässt die Farben wie die Zeiger einer Uhr um einen Mittelpunkt kreisen — so entstehen Farbräder, Tortendiagramm-Segmente und winklige Akzente. Dieses Tool unterstützt alle drei CSS-Funktionen mit eigenen Einstellmöglichkeiten — Winkel und Richtungsvorgaben für linear, Form und Zentrumsposition für radial, Startwinkel für konisch. Wähle oben einen Typ und sieh dir das Ergebnis live an, bevor du den Code kopierst.

Ein Farbstopp ist eine einzelne Farbe an einem bestimmten Punkt entlang des Verlaufs, in CSS geschrieben als Farbe plus Prozentwert, etwa "#ff0000 0%, #0000ff 100%". Die Prozentwerte geben an, wo jede Farbe ihre volle Stärke erreicht; alles zwischen zwei Stopps wird automatisch überblendet. Rückst du zwei Stopps näher zusammen, wird der Übergang schärfer; ziehst du sie auseinander, wird er weicher. Du bist nicht auf zwei Stopps beschränkt — weitere Stopps an Zwischenpositionen erlauben einen Verlauf durch mehrere Farben, wobei zwei oder drei meist aufgeräumter wirken als lange Regenbogenverläufe. In diesem Generator akzeptiert jede Ebene unbegrenzt viele Stopps, jeder Stopp hat einen eigenen Farbwähler und ein Hex-Feld, und ein verschiebbarer Balken lässt dich jeden Stopp per Augenmaß zwischen 0 und 100 % neu positionieren. Passe die Stopps oben an, und das CSS aktualisiert sich sofort.

Ein CSS-Verlauf wird vom Browser aus wenigen Codezeilen gezeichnet, fügt deiner Seite also null zusätzliche Bild-Bytes hinzu und bleibt bei jeder Größe perfekt scharf — auf einem Smartphone wie auf einem 4K-Display pixelt oder verschwimmt er nie so, wie es bei einem skalierten JPG oder PNG passieren würde. Das hält Seiten leichter und schneller und erlaubt dir, Farben später einfach im Text zu ändern, statt eine Grafikdatei neu zu exportieren. Eine Bilddatei bleibt sinnvoll, wenn du einen flachen Hintergrund für eine Präsentation, eine E-Mail oder einen Social-Post brauchst, wo CSS nicht funktioniert. Dieses Tool deckt beide Fälle ab: kopiere einsatzbereites CSS (mit solider Fallback-Farbe) oder exportiere denselben Verlauf als PNG, JPG, WebP oder SVG in einer konfigurierbaren Größe, die standardmäßig 1920 × 1080 beträgt. Erstelle deinen Verlauf oben und entscheide dich dann für Code oder ein herunterladbares Bild.

Repeating-Verläufe verwandeln einen einzelnen Satz Farbstopps in ein gekacheltes Muster statt in einen einzigen weichen Übergang. In CSS nutzt das die repeating--Varianten wie repeating-linear-gradient, die deine Stopps nehmen und über das gesamte Element hinweg wiederholen — sodass zwei nur wenige Prozent auseinanderliegende Stopps zu gleichmäßig verteilten Streifen werden, und eine konische Version Torten- oder Sternmuster erzeugt. Entscheidend ist der Abstand deiner Stopps: enge, hart abgegrenzte Stopps ergeben knackige Streifen, während breitere oder weichere Stopps zu Bändern verschwimmen. In diesem Generator schaltest du jede Ebene per Schalter auf ihre Repeating-Variante um und stellst dann die Stopp-Positionen ein, um Streifenbreite und Winkel zu steuern. Du kannst auch mehrere Ebenen übereinanderlegen, um Muster zu Karos und Netzen zu überlagern. Aktiviere oben Repeat auf einer Ebene, passe die Stopps an und kopiere das resultierende CSS.

Easing verändert, wie schnell Farben zwischen Stopps ineinander übergehen, nicht welche Farben erscheinen. Standardmäßig interpoliert ein Verlauf linear, sodass sich die Farbe mit konstanter Rate ändert und genau der Mittelpunkt wie ein harter, leicht trüber Streifen wirken kann — besonders zwischen zwei stark gesättigten Farben. Eine ease-in-, ease-out- oder ease-in-out-Kurve verteilt diesen Übergang neu, sodass sich mehr davon an einem Ende abspielt, was den Mittelpunkt abmildert und den Verlauf hinter Text oder UI natürlicher wirken lässt. Es ist ein subtiler, aber realer Qualitätshebel, den viele handgeschriebene Verläufe auslassen. Dieses Tool bietet die Optionen linear, ease-in, ease-out und ease-in-out und übernimmt die Wahl direkt in den generierten Code, sodass die Vorschau exakt dem entspricht, was ausgeliefert wird. Probiere oben das Easing aus, um einen harten Mittelpunkt zu glätten, und kopiere dann das CSS.