Hintergrundmuster-Generator
Punkte, diagonale Streifen, Raster, Zickzack oder Wellen: Wähle zwei Farben und die Dichte, sieh dir die gekachelte Vorschau an und lade eine nahtlose PNG-Kachel herunter, die sich beliebig wiederholen lässt.
Die heruntergeladene Kachel wiederholt sich nahtlos, ohne sichtbare Übergänge.
Was ein Muster wirklich nahtlos macht
Eine nahtlose Kachel ist ein Bild, dessen Ränder perfekt zusammenpassen: Was rechts hinausläuft, kommt links identisch wieder herein, und vertikal gilt dasselbe. Dieser Generator zeichnet jedes Motiv mit Blick auf diese Kontinuität: Die diagonalen Streifen zum Beispiel haben Abstände in exakten Bruchteilen der Kachel, sodass du das PNG endlos wiederholen kannst, ohne Nähte oder sichtbare Stufen.
So verwendest du das heruntergeladene PNG
Auf einer Website reicht eine einzige CSS-Zeile: background-image: url(pattern.png);
background-repeat: repeat;. Dieselbe Kachel funktioniert als Füllung in Canva, PowerPoint, Photoshop oder GIMP (über „Muster festlegen“), als Hintergrund für YouTube-Thumbnails und Social-Media-Posts oder als dezente Textur für Briefpapier und Grußkarten. Je höher die Dichte, desto kleiner und enger das Muster.
Warum ein Muster weniger Datenvolumen braucht als ein Foto
Ein wiederholbarer Hintergrund kann nur ein paar Kilobyte groß sein und trotzdem einen ganzen Bildschirm füllen, weil der Browser dieselbe Kachel hundertmal zeichnet. Ein Foto, das dieselbe Fläche bedeckt, ist hundert- bis tausendmal größer und muss erst heruntergeladen werden, bevor die Seite fertig aussieht.
Der andere Vorteil ist, dass ein Muster zu jeder Größe passt: Es hat keine Auflösung, die man beachten müsste, wird auf einem großen Bildschirm nicht pixelig und lässt auf einem schmalen keine leeren Ränder. Deshalb haben Musterhintergründe zwanzig Jahre wechselnder Moden überlebt.
Ein Muster soll nicht auffallen
Ein Hintergrund, der mit dem Inhalt konkurriert, ist der falsche Hintergrund: Der Kontrast zwischen Motiv und Untergrund muss sehr niedrig bleiben, oft nur ein paar Punkte Helligkeitsunterschied. Auf dem Bildschirm wirkt das fast unsichtbar, und genau das ist das Zeichen, dass es stimmt.
Die konkrete Gefahr ist Text, der beim Lesen ermüdet: Unter einer Textzeile erzeugt jedes Motiv mit kleinen Details ein Rauschen, das das Lesen bremst. Liegt das Muster hinter Text, muss es entweder stark aufgehellt oder von einer einfarbigen Fläche abgedeckt werden.
Kleine und große Kacheln
Eine kleine Kachel wiederholt sich oft, und die Wiederholung fällt auf: Das Auge findet das Raster sofort, vor allem wenn das Motiv ein erkennbares Element hat. Eine große Kachel verbirgt die Wiederholung besser, ist aber als Datei größer und braucht sorgfältige Arbeit an den Rändern.
Am besten funktionieren Motive, die geometrisch und regelmäßig sind (Streifen, Punkte, Raster, Diagonalen): Bei ihnen gehört die Wiederholung zum Design und ist kein Fehler. Ein figürliches Motiv verrät die Kachel dagegen auf den ersten Blick, weil das Gehirn dieselbe Form an derselben Stelle wiedererkennt.
Siehe auch
Für einen Hintergrund mit Farbverlauf statt mit Wiederholung gibt es den CSS-Farbverlauf-Generator. Farben wählst du mit dem Farbwähler, und die Lesbarkeit von Text darauf prüfst du mit dem Kontrastprüfer.