CSS-Verlauf
Lineare, radiale und konische Verläufe mit sanften Übergängen in OKLCH. Als CSS, SVG oder Bild exportieren.
Im Editor öffnenFliessende, seidige und körnige Verläufe aus einem Shader auf der Grafikkarte. Mit Domain Warping, Bayer-Dithering, Körnung und Vignette. PNG, JPG und WebP bis 8K, dazu nahtlose GIF-Schleifen.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Ein Shader-Farbverlauf ist ein Verlauf, den ein kleines Programm direkt auf der Grafikkarte berechnet. Statt weniger fester Farbstopps entsteht ein lebendiges Feld aus Rauschen, das sich mit Domain Warping verbiegt und dann deine Farben durchläuft. So entstehen flüssige, seidige oder körnige Hintergründe, die keine Bilddatei als Vorlage brauchen. Musterli rechnet alles in deinem Browser, nichts verlässt dein Gerät.
Wähl einen Stil wie Flüssig, Seide oder Polarlicht und such zwei bis sechs Farben aus. Mit Frequenz, Verzerrung und Winkel formst du das Feld, mit Körnung, Vignette und Bayer-Dithering gibst du ihm eine Oberfläche. Die Leertaste würfelt neue Farben und eine neue Form. Mit dem Zeitpunkt wählst du das Standbild für den Export. Exportier danach als PNG, JPG oder WebP bis 8K oder als nahtlose GIF-Schleife.
Shader-Farbverlauf jetzt ausprobierenÜber 30 eigene Verläufe mit CSS-Code zum Kopieren, jeder direkt im Editor anpassbar.
Zur VerlaufssammlungLineare, radiale und konische Verläufe mit sanften Übergängen in OKLCH. Als CSS, SVG oder Bild exportieren.
Im Editor öffnenWeiche, fliessende Farbverläufe aus mehreren unscharfen Farbflächen. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnenVerträumte Hintergründe aus grossen, stark weichgezeichneten Farbkreisen. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnenSenkrechte Streifen mit je eigenem Verlauf, leicht gegeneinander versetzt. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnenWandernde, drehende und farbwechselnde Verläufe und schwebende Flecken als reines CSS. CSS, Tailwind oder HTML kopieren, PNG und GIF exportieren.
Im Editor öffnen