Was Pattern Generator leistet.
Pattern Generator erstellt gekachelte geometrische Hintergründe aus Inline-SVG. Wählen Sie ein Muster — Punkte, Streifen, Raster, Chevrons und mehr — und legen Sie Vordergrund- und Hintergrundfarben, Kachelmaßstab und Deckkraft fest.
Die Vorschau aktualisiert sich live, während Sie die Regler anpassen. Wenn Ihnen das Ergebnis gefällt, exportieren Sie im Format, das Ihr Workflow braucht: ein CSS-background-Snippet, eine eigenständige SVG-Kachel oder ein 1600×900-PNG.
Auswählen, anpassen und in vier Schritten exportieren.
- Öffnen Sie Pattern Generator und klicken Sie in der Auswahl auf eine Musterkachel.
- Passen Sie Vordergrund- und Hintergrundfarben, Skala und Deckkraft an, bis die Vorschau zu Ihrer Marke oder Ihrem Layout passt.
- Klicken Sie auf CSS kopieren, um eine einfügfertige Hintergrund-Eigenschaft zu erhalten, oder nutzen Sie SVG herunterladen / PNG herunterladen für Asset-Dateien.
- Setzen Sie die Ausgabe in Ihr Seiten-Stylesheet, Ihre Figma-Datei oder Ihr Slide-Deck ein — ohne Konto und ohne Upload.
CSS in eine Seite einfügen.
Das kopierte CSS ist eine einzelne background-Deklaration mit einer Inline-SVG-Data-URI. Fügen Sie sie in eine Klassenregel oder einen Inline-Stil auf dem Element ein, das das Muster zeigen soll:
Beispiel: fügen Sie die kopierte Zeile zu .hero { … } oder einer Utility-Klasse in Ihrem Stylesheet hinzu. Das SVG kachelt nahtlos, funktioniert also in vollbreiten Bereichen, Karten und Hero-Blöcken ohne zusätzliches Markup.
Da das Muster als Data-URI eingebettet ist, brauchen Sie keine separate Bilddatei zu hosten. Deploys bleiben einfach — ein CSS-Einfügen und Sie sind fertig.
Die SVG-Kachel als Figma-Fill nutzen.
Laden Sie die SVG-Kachel herunter und ziehen Sie sie in Ihre Figma-Datei, oder nutzen Sie Bild platzieren, um sie zu importieren. Wählen Sie einen Frame oder eine Form und setzen Sie den Fill-Typ auf Bild, dann wählen Sie das importierte SVG.
Setzen Sie den Fill-Modus auf Kacheln, damit die geometrische Wiederholung der Tool-Vorschau entspricht. Passen Sie in Figma die Skala an, wenn Sie eine dichtere oder lockerere Wiederholung als die Standard-Kachelgröße brauchen.
Dieser Weg ist nützlich, wenn Sie dasselbe Muster in einem Mockup und in produktivem CSS wollen — einmal aus Pattern Generator exportieren, SVG in Figma und CSS auf der Live-Seite nutzen.
PNG für Slides und OG-Bilder.
PNG herunterladen exportiert ein 1600×900-Raster des aktuellen Musters mit Ihren Farb- und Skaleneinstellungen. Nutzen Sie es als Slide-Hintergrund in Keynote, Google Slides oder PowerPoint oder als Social-Preview, wenn Sie ein flaches Asset statt live CSS brauchen.
PNG ist auch praktisch für Tools ohne SVG-Fills oder Data-URI-Hintergründe — E-Mail-Vorlagen, PDF-Exporte und Thumbnail-Generatoren brauchen oft eine einzelne Bilddatei.
Nur lokal im Browser.
Pattern Generator läuft vollständig in Ihrem Browser. Farben, Skala und Exporte werden auf Ihrem Gerät berechnet — nichts wird an Tiny Design Shop oder einen Drittserver hochgeladen. Schließen Sie den Tab und Ihre Sitzung ist weg.