Verlauf-Generator
Lineare, radiale und konische CSS-Verläufe von Grund auf mit ziehbarer Mehr-Stopp-Steuerung und kuratierten Voreinstellungen erstellen. Sofort kopierbares CSS erhalten.
background: —;
Alles wird live im Browser berechnet — keine Registrierung, vollständig kostenlos.
Über Verlauf-Generator
Der Gradient Generator erstellt individuelle CSS-Verläufe von Grund auf. Wähle einen linearen, radialen oder konischen Typ, stelle den Winkel ein und forme die Mischung mit einem Mehrfachstopp-Editor: Ziehe Griffe, um Stopps zu verschieben, klicke auf die Leiste, um neue hinzuzufügen, und färbe jeden Stopp mit einem Farbwähler um: Die Live-Vorschau aktualisiert sich, während du arbeitest.
Kuratierte Voreinstellungen geben dir einen starken Ausgangspunkt, wenn du nicht bei null beginnen möchtest, und Ein-Klick-Aktionen (Zufall, Umkehren, um 45° rotieren) machen das Erkunden schnell. Das erzeugte CSS ist immer sichtbar und bleibt mit der Vorschau synchron, sodass das, was du kopierst, genau dem entspricht, was du gesehen hast.
Alles wird live in deinem Browser kostenlos berechnet. Kopiere die vollständige CSS-Regel oder nur den Hintergrundwert und füge ihn in ein Stylesheet, einen Button-Stil oder einen Hero-Bereich ein: ein unkomplizierter CSS-Verlaufsgenerator für Hintergründe, Overlays und UI-Akzente.
So verwenden Sie Verlauf-Generator
- Wähle einen Verlaufstyp: linear, radial oder konisch.
- Starte mit einer Voreinstellung oder klicke auf „Zufällig“ für einen sofortigen Ausgangspunkt.
- Ziehe die Stopp-Griffe, um Farben zu positionieren, klicke auf die Leiste, um Stopps hinzuzufügen, und bearbeite die Farbe jedes Stopps.
- Passe den Winkel an oder nutze „Umkehren“ und „Um 45° rotieren“, um die Mischung neu auszurichten.
- Kopiere die CSS-Regel oder den Hintergrundwert und füge ihn in dein Projekt ein.