Zum Inhalt springen
Musterli
Verläufe

Shader-Farbverlauf

Fliessende, 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 öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Shader-Farbverlauf

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

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.

So geht’s

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

Häufige Fragen

Brauche ich eine besondere Grafikkarte?
Nein. Jeder aktuelle Browser mit WebGL2 reicht, das können Chrome, Edge, Firefox und Safari seit Jahren. Fehlt WebGL2, etwa weil die Hardwarebeschleunigung abgeschaltet ist, zeigt Musterli einen Hinweis statt einer leeren Fläche.
Sieht der Export genauso aus wie die Vorschau?
Ja. Vorschau und Export nutzen denselben Shader mit denselben Werten. Grosse Exporte bis 8K rechnet Musterli in Kacheln, Körnung und Dithering bleiben dabei an derselben Stelle wie in der Vorschau.
Was bringt das Bayer-Dithering?
Es reduziert den Verlauf auf wenige Farbstufen und verteilt die Übergänge in einem regelmässigen Punktraster. Das ergibt einen Retro-Look wie bei alten Computern und Druckern und verhindert sichtbare Streifen in weichen Verläufen.
Kann ich den Verlauf animiert verwenden?
Der GIF-Export zeichnet eine nahtlose Schleife, deren erstes Bild genau dein Standbild ist. Die Vorschau bewegt sich mit dem eingestellten Tempo, ausser du hast im System weniger Bewegung eingestellt.
Sieht derselbe Verlauf immer gleich aus?
Ja. Das Rauschen hängt nur vom Seed und von deinen Einstellungen ab. Ein Teilen-Link oder ein gespeichertes Design ergibt darum auf jedem Gerät dasselbe Bild.

Fertige Farbverläufe

Über 30 eigene Verläufe mit CSS-Code zum Kopieren, jeder direkt im Editor anpassbar.

Zur Verlaufssammlung
Alle Generatoren in Verläufe