Hintergrundmuster-Generator
Background Pattern Generator
Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.
Zeichnet ein nahtloses Hintergrundmuster – Punkte, Raster, Streifen, Karos, Kreuze, Dreiecke oder Wellen – und gibt es als CSS-Data-URI, als SVG-Datei oder als `<pattern>`-Fragment zum Einfügen in ein bestehendes Dokument zurück. Die Drehung wird als `patternTransform` angewendet, die Kachel bleibt also nahtlos, statt an ihren eigenen Kanten zu brechen.
Muster
Das leiseste Muster überhaupt. Halten Sie den Punkt unter einem Fünftel der Kachel, sonst liest er sich als Textur statt als Muster.
Ausgabe
450 Bytes als URL-kodierter URI gegenüber 526 als Base64.
URL-kodiert statt Base64 — hier 14% kleiner und im Stylesheet weiterhin lesbar. Der SVG-Daten-URI-Kodierer macht dasselbe mit jedem SVG.
So funktioniert es
Wählen Sie die Form
Jede sagt, wofür sie ist. Punkte sind die leisesten; ein Raster ist hinter einem Diagramm lesbar und hinter Text ablenkend; diagonale Streifen sind die „Baustelle“-Füllung, die jeder erkennt.
Setzen Sie Kachelgröße und Strichstärke
Die Strichstärke ist ein Bruchteil der Kachel und kein Pixelwert, das Muster behält also seinen Charakter, wenn Sie die Kachel skalieren. Über etwa einem Fünftel hört die Form auf, sich als Muster zu lesen, und beginnt, sich als Textur zu lesen.
Halten Sie den Kontrast niedrig
Das ist die Entscheidung, an der ein Hintergrund gelingt oder scheitert. Ein Muster, das sichtbar ist, ist gewöhnlich schon zu stark: Wählen Sie einen Vordergrund ein oder zwei Stufen vom Hintergrund entfernt statt einer Kontrastfarbe, und prüfen Sie ihn hinter echtem Text, bevor Sie ausliefern.
Nehmen Sie das CSS, die Datei oder das Fragment
Das CSS ist eine URL-kodierte Data-URI, bereit für `background-image`. Die SVG-Datei ist für überall dort, wo eine URI nicht reicht. Das `<pattern>`-Fragment gehört in ein bestehendes `<svg>` und wird als `fill="url(#p)"` referenziert.
Häufige Fragen
Kachelt es ohne Naht?
Ja, und das ist der Teil, für den die Geometrie arbeitet. Die diagonalen Streifen werden als drei umgeschlagene Kopien gezeichnet, damit die Diagonale über die Kachelkante hinweg weiterläuft, und die Welle sind zwei kubische Segmente, die an der Nahtstelle in der Steigung übereinstimmen. Die Drehung läuft aus demselben Grund über `patternTransform` – die Geometrie innerhalb der Kachel zu drehen ließe abgeschnittene Enden an der Grenze.
Kann ich ein PNG exportieren?
Nicht hier. Die Ausgabe ist SVG in drei Verpackungen, was auflösungsunabhängig ist und ein Bruchteil der Größe – ein Punktmuster sind als Data-URI ein paar hundert Bytes und wären als PNG-Kachel ein paar Kilobyte. Wenn ein Raster verlangt wird, laden Sie das SVG herunter und rastern Sie es.
Schadet ein Hintergrundmuster der Leistung?
Selten, aber es gibt einen echten Fall: Eine sehr kleine Kachel über einer sehr großen Fläche lässt den Compositor sie sehr oft wiederholen, und auf einem schwachen Telefon zeigt sich das beim Scrollen. Wenn sich eine Seite mit einem Muster darauf schwer anfühlt, probieren Sie eine größere Kachel mit derselben scheinbaren Dichte.
Kann ich ein Muster als Textur über ein Bild legen?
Ja – schalten Sie den transparenten Hintergrund ein, und die Kachel trägt nur die Vordergrundformen, sodass das, was dahinter ist, durchscheint. Stapeln Sie es als zweite `background-image`-Ebene über dem Foto.
Eingabe aus
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Social-Card-Generator
Social Card Generator
Setzt ein 1200×630-Teilbild aus Titel, Untertitel, Markenzeile und optionalem Logo auf einer gewählten Vorlage zusammen und schreibt die passenden Meta-Tags dazu.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Social-Card-Generator
Social Card Generator
Setzt ein 1200×630-Teilbild aus Titel, Untertitel, Markenzeile und optionalem Logo auf einer gewählten Vorlage zusammen und schreibt die passenden Meta-Tags dazu.
SVG als CSS-Data-URI
SVG to CSS Data URI
Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.