Alle Farb-Tools

Erstellen Sie nahtlose SVG-Hintergrundmuster aus fast 2.000 Designs: Farben, Zoom, Abstand und Winkel anpassen, dann CSS kopieren oder SVG, PNG, WebP laden.

Kostenlos

1Muster auswählen

Ihre Überschrift hier

Sehen Sie, wie das Muster hinter echten Inhalten wirkt.

Jetzt starten
Muster

Nach 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

  1. Muster auswählen: nach Name suchen oder nach Sammlung und Anzahl der Farben filtern.
  2. Farben wählen: mit den Farbwählern, einer fertigen Palette oder über „Neue Palette“.
  3. Zoom, Position, Abstand, Linienstärke und Winkel anpassen. Sperren Sie jeden gewünschten Wert, bevor Sie auf „Inspirieren lassen“ klicken.
  4. Mit den Vorschauen „Kachel anzeigen“, „Auf einer Seite“ und „Im Text“ prüfen.
  5. Den Code kopieren oder die Datei herunterladen und mit „Link kopieren“ später zu genau diesem Muster zurückkehren.

Häufig gestellte Fragen

Ja. Das Tool ist kostenlos, ohne Anmeldung und ohne Limit: Jedes Muster wird in Ihrem Browser gezeichnet, daher wird keine Datei an einen Server gesendet.

Ja. Die exportierten Muster dürfen Sie privat und gewerblich nutzen, etwa für Websites, Apps, Verpackungen und Druck, ohne Namensnennung.

Nein. Jede Form, die über den Rand einer Kachel hinausragt, wird auf der gegenüberliegenden Seite erneut gezeichnet, sodass die Wiederholung nahtlos ist. Mit der Vorschau „Kachel anzeigen“ sehen Sie genau, wo eine Kachel beginnt und endet.

CSS ist am einfachsten: Fügen Sie die Regel in Ihr Stylesheet ein und wenden Sie sie auf ein beliebiges Element an. Bei 0, 90, 180 oder 270 Grad nutzt sie eine kleine Kachel mit background-size, bei anderen Winkeln ein SVG, das das Element füllt. Die Versionen für Tailwind, SCSS, React und Data-URI enthalten dasselbe Muster.

Die Animation ist in das SVG eingebaut, benötigt also kein Skript und läuft in modernen Browsern auch als CSS-Hintergrund. Prüfen Sie sie in den Browsern, die Sie unterstützen. PNG-, JPG- und WebP-Dateien sind weiterhin Bilder und enthalten nur das erste Bild.

Organische Designs wie Tarnmuster und topografische Karten enthalten viele Kurven. Die Größe des Codes steht neben der Schaltfläche zum Kopieren. Ist er für eine Seite zu schwer, wählen Sie ein Design mit kleinerer Kachel oder verwenden Sie stattdessen eine PNG-Kachel.

Ja, bei fast jedem Muster: Aktivieren Sie „Transparenter Hintergrund“ und exportieren Sie als CSS, SVG, PNG oder WebP. Einige überlappende Designs verdecken Formen mit der Hintergrundfarbe und brauchen daher einen einfarbigen Hintergrund. JPG-Dateien unterstützen keine Transparenz.


Beliebte Suchen
svg muster generator nahtloses muster generator css hintergrundmuster muster erstellen online kostenlose hintergrundmuster geometrische muster generator tailwind hintergrundmuster nahtlose kachel png
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu: kopiere den Code unten und füge ihn ein.