what this does
Eigenes Bild in eine Wiederholungskachel verwandeln.
Pattern Generator kann Hintergründe aus 16 geometrischen Presets — oder aus einem hochgeladenen Bild — erstellen. Verwenden Sie eine Textur, Markenzeichen, Fotoausschnitt oder jede PNG-, JPEG-, WebP- oder SVG-Datei als Wiederholungskachel.
Das Tool läuft vollständig im Browser. Datei wählen, Hintergrundfarbe, Kachelgröße und Deckkraft anpassen, dann CSS kopieren oder SVG oder PNG herunterladen. Kein Konto und kein Server-Upload.
step-by-step
In fünf Schritten hochladen und exportieren.
- Öffnen Sie Pattern Generator.
- Klicken Sie in der Muster-Auswahl auf die Karte Your image — die Upload-Kachel am Anfang des Rasters.
- Wählen Sie eine PNG-, JPEG-, WebP- oder SVG-Datei von Ihrem Gerät. Die Vorschau aktualisiert sich, sobald das Bild geladen ist.
- Passen Sie Background colour, Scale und Opacity an, bis die Wiederholung in der Vorschau stimmt.
- Klicken Sie auf Copy CSS, Download SVG oder Download PNG, um das Muster im Projekt zu verwenden.
your file
Was mit Ihrem Bild passiert.
Pattern Generator schneidet Ihr Bild auf ein zentrales Quadrat zu — die Mitte der Datei, wobei die kürzere Seite als Zuschnittgröße dient — und skaliert dieses Quadrat auf die Kachelmaße für die aktuelle Skalierung (bis 256 px).
Die gesamte Verarbeitung erfolgt im Arbeitsspeicher auf Ihrem Gerät. Die Originaldatei wird nie an Tiny Design Shop oder einen Drittanbieter-Server hochgeladen.
transparent pngs
Transparente PNGs und Hintergrundfarbe.
Hat Ihr Bild Transparenz — PNG, WebP mit Alpha oder SVG — füllt Pattern Generator die Kachel mit der gewählten Background colour, bevor das Bild darüber gezeichnet wird. Undurchsichtige Bereiche bleiben sichtbar; transparente Pixel lassen die Hintergrundfarbe durchscheinen.
Nutzen Sie dies, um die Lückenfarbe zwischen Logos zu steuern, Kanten bei ausgeschnittenen Texturen weicher zu machen oder eine Markenoberflächenfarbe abzustimmen, wenn die Quelldatei keinen eigenen Hintergrund hat.
export
CSS, SVG oder PNG kopieren.
Copy CSS liefert einen einfügfertigen Block aus background-color, background-image und background-size mit der Kachel als data URI. Fügen Sie ihn in das Stylesheet oder den Inline-Stil des Elements ein, das die Wiederholung zeigen soll.
Download SVG exportiert die Kachel als eigenständige Vektordatei — nützlich für Figma-Füllungen oder Design-Übergabe. Download PNG exportiert ein 1600×900-Raster der gekachelten Vorschau — besser für Folien, Social Previews oder Tools ohne data-URI-Hintergründe.
Detaillierte Custom-Bilder erzeugen längere CSS-Snippets. Warnt das Tool vor großem CSS, bevorzugen Sie Download PNG oder hosten Sie die Kachel als separate Bilddatei statt als Inline-data-URI.
limits
Dateigröße, Kachelgröße und Sitzungsspeicher.
Uploads sind auf 8 MB begrenzt. Akzeptierte Typen: PNG, JPEG, WebP und SVG. Die Kachel ist bei maximaler Skalierung auf 256 px auf der längsten Seite begrenzt — genug für scharfe CSS-Wiederholungen ohne aufgeblähtes Stylesheet.
Ihr Custom-Bild existiert nur in diesem Browser-Tab. Seite neu laden oder Tab schließen löscht den Upload — Sie müssen die Datei erneut wählen. Kein Cloud-Speicher oder geräteübergreifende Synchronisation.
privacy
Ihre Datei verlässt Ihr Gerät nicht.
Pattern Generator verarbeitet Uploads lokal im Browser. Zuschnitt, Skalierung, Vorschau und Export laufen auf Ihrem Rechner — nichts geht an Tiny Design Shop-Server. Schließen Sie den Tab nach Abschluss; es wird keine Kopie Ihres Bildes aufbewahrt.