SVG-Hintergrundmuster-Generator
Wiederholende Hintergrundmuster wie Punkte, Gitter oder Streifen nach Farbe und Größe anpassen und als SVG/CSS erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Erstelle fünf wiederholende Muster – Punkte, Gitter, Streifen, Diagonalen und Karos – und passe sie über Musterfarbe, Hintergrundfarbe und Kachelgröße an. Das Ergebnis wiederholt eine einzige, sehr kleine SVG-Kachel und lässt sich als CSS-Hintergrundcode kopieren, der jede Fläche gestochen scharf füllt.
Anleitung
- Wähle im Reiter die Musterart wie Punkte, Gitter oder Streifen.
- Stell die Dichte mit den Reglern für Kachelgröße und Punkt-/Linienstärke ein.
- Lege Muster- und Hintergrundfarbe fest, um die gewünschte Stimmung zu treffen.
- Hol dir unten mit „CSS kopieren" den background-Code und mit „SVG kopieren" das Original-SVG.
FAQ
- Warum SVG statt einer Bilddatei?
- SVG ist vektorbasiert, wird also beim Vergrößern nicht unscharf, und als Data-URI eingebettet wiederholt es sich direkt im CSS ohne zusätzliche Dateianfrage, was die Seite leichter macht.
- Ich möchte das Muster halbtransparent machen.
- Häng an den HEX-Wert der Musterfarbe einfach einen Alpha-Wert an. #6366f180 ist zum Beispiel ein Indigo mit rund 50 % Transparenz. Es überlagert sich sanft mit der Hintergrundfarbe zu einer dezenten Textur.
- Kann ich den erzeugten Code bedenkenlos verwenden?
- Es werden nur standardmäßige SVG- und CSS-background-Eigenschaften genutzt, daher läuft er problemlos in aktuellen Browsern. Ist der Farbkontrast jedoch zu stark, kann die Lesbarkeit des Textes leiden – prüfe es daher zur Sicherheit auf dem echten Bildschirm.