Muster-Generator
Erstellen Sie nahtlose SVG-Hintergrundmuster aus fast 2.000 Designs: Farben, Zoom, Abstand und Winkel anpassen, dann CSS kopieren oder SVG, PNG, WebP laden.
1Muster auswählen
Kein Muster entspricht diesen Filtern.
2Farben wählen
3Muster anpassen
4Animieren (optional)
Das Muster bewegt sich pro Durchlauf um genau eine Kachel und springt daher nie. Die Bewegung bleibt im Code und in der SVG-Datei erhalten; Bilddateien stehen still.
5Kopieren oder herunterladen
Ihre Überschrift hier
Sehen Sie, wie das Muster hinter echten Inhalten wirkt.
Jetzt startenNach Sammlung durchsuchen
Über Muster-Generator
Der Muster-Generator macht aus fast 2.000 fertigen Designs Hintergründe, die Sie anpassen und sofort verwenden können. Stöbern Sie in 14 Sammlungen, von Wellen, Tupfen und Parkettierungen über Tartans, japanisches Seigaiha, islamische Sterne und Art-déco-Fächer bis zu Pixel-Sprites und Tarnmustern, und sehen Sie jedes Design in Ihren eigenen Farben.
Jedes Design ist als Vektorgrafik gezeichnet und wiederholt sich ohne sichtbare Naht, bei jedem Zoom und in jedem Winkel. Ändern Sie bis zu sechs Farben, Zoom, Position, Abstand, Linienstärke und Winkel, verwandeln Sie gefüllte Formen in Umrisse oder lassen Sie das Muster in einer Endlosschleife laufen. Generative Muster wie topografische Karten, Voronoi-Zellen und Truchet-Kacheln erzeugen bei jedem Klick eine neue Variante.
Wenn es passt, kopieren Sie es als CSS, SCSS, Tailwind-Konfiguration, Inline-SVG, Data-URI oder React-Komponente, oder laden Sie ein SVG, PNG, JPG oder WebP in beliebiger Größe bis 8000 Pixel herunter, auch als einzelne Kachel für Ihre eigene Wiederholung. Alles läuft in Ihrem Browser: Es wird nichts hochgeladen, und ein Konto ist nicht nötig.
So verwenden Sie Muster-Generator
- Muster auswählen: nach Name suchen oder nach Sammlung und Anzahl der Farben filtern.
- Farben wählen: mit den Farbwählern, einer fertigen Palette oder über „Neue Palette“.
- Zoom, Position, Abstand, Linienstärke und Winkel anpassen. Sperren Sie jeden gewünschten Wert, bevor Sie auf „Inspirieren lassen“ klicken.
- Mit den Vorschauen „Kachel anzeigen“, „Auf einer Seite“ und „Im Text“ prüfen.
- Den Code kopieren oder die Datei herunterladen und mit „Link kopieren“ später zu genau diesem Muster zurückkehren.