Generatoren

Such dir einen Generator aus, drück die Leertaste und lass dich überraschen.

Muster (5 Generatoren)

Wiederholbare Muster aus Punkten, Linien und Formen für Websites, Präsentationen und Drucksachen.

Polka Dots
Punktmuster im Raster, versetzt oder frei verstreut. Als SVG oder Bild exportieren.
Im Editor öffnen
Nahtlose Muster
Nahtlos kachelbare Muster aus Formen oder deiner eigenen Grafik. Als SVG, CSS, Kachel oder Bild exportieren.
Im Editor öffnen
Grid Patterns
Rasterlinien, Punktraster, Kreuze oder Kacheln mit Haupt- und Nebenraster. Als SVG oder Bild exportieren.
Im Editor öffnen
Confetti
Konfetti aus Rechtecken, Kreisen, Dreiecken und Kringeln, gleichmässig verteilt. Als SVG oder Bild exportieren.
Im Editor öffnen
Dieter Dots
Konzentrische Punktringe wie bei einem gelochten Lautsprechergitter. Als SVG oder Bild exportieren.
Im Editor öffnen

Muster und Verläufe, die der Browser selbst zeichnet. Kopiere einfach das CSS, ganz ohne Bilddatei.

CSS-Muster
Über 30 Muster aus reinem CSS: Punkte, Raster, Streifen, Wellen und Geometrie. Als CSS, Tailwind, SVG oder Bild exportieren.
Im Editor öffnen

Weiche Farbübergänge für Hintergründe, Buttons und Titelbilder.

CSS-Verlauf
Lineare, radiale und konische Verläufe mit sanften Übergängen in OKLCH. Als CSS, SVG oder Bild exportieren.
Im Editor öffnen
Mesh-Verlauf
Weiche, fliessende Farbverläufe aus mehreren unscharfen Farbflächen. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnen
Verschwommener Verlauf
Verträumte Hintergründe aus grossen, stark weichgezeichneten Farbkreisen. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnen
Streifenverlauf
Senkrechte Streifen mit je eigenem Verlauf, leicht gegeneinander versetzt. Als PNG, JPG, WebP, SVG oder CSS exportieren.
Im Editor öffnen

Flächen, Formen und Texturen, die Websites, Slides und Social-Media-Posts einen Rahmen geben.

Blob-Generator
Organische Formen per Klick, mit Farbe, Kontur oder Verlauf. Als SVG oder Bild exportieren.
Im Editor öffnen
SVG-Wellen
Geschichtete Wellen für Abschnitte, Header und Hintergründe. Als SVG, CSS oder Bild exportieren.
Im Editor öffnen
Blob-Komposition
Mehrere Blobs an Ecken und Rändern, die sich jeder Bildgrösse anpassen. Als SVG oder Bild exportieren.
Im Editor öffnen
Doodle-Hintergründe
Handgezeichnet wirkende Kringel, Spiralen, Sterne und Zickzacklinien als Hintergrund. Als SVG oder Bild exportieren.
Im Editor öffnen
SVG-Diagramme
Platzhalter-Diagramme mit Zufallsdaten für Mockups: Linien, Flächen und Balken. Als SVG oder Bild exportieren.
Im Editor öffnen
Starry Sky
Sternenhimmel mit Farbverlauf, funkelnden Sternen und Glanzlichtern. Als SVG oder Bild exportieren.
Im Editor öffnen

Körnung, Raster und andere Effekte für Flächen und Bilder.

Noise und Grain
Körnige Texturen und Hintergründe mit feinem Rauschen über Farbe oder Verlauf. Als PNG, JPG, WebP oder SVG exportieren.
Im Editor öffnen

Paletten, Abstufungen und Farbskalen, gut lesbar und bereit für dein Design-System.

Farbpaletten-Generator
Harmonische Farbpaletten per Leertaste. Farben sperren, Harmonie wählen, Kontrast prüfen und als CSS exportieren.
Im Editor öffnen
Tints & Shades
Hellere und dunklere Abstufungen einer Farbe. Export als HEX, RGB, HSL oder CSS-Variablen.
Im Editor öffnen
Tailwind-Farbpalette
Aus einer Farbe die elf Tailwind-Stufen 50 bis 950. Export für tailwind.config.js, @theme, OKLCH und HEX.
Im Editor öffnen
Palette aus Bild
Zieh ein Foto hinein und erhalte seine wichtigsten Farben mit Anteil in Prozent. Das Bild bleibt in deinem Browser.
Im Editor öffnen

Code und Bilder umwandeln, direkt im Browser.