Muster-Hintergrund-Generator

Reines CSS, keine Bilddateien

Jedes Muster hier wird mit CSS-Verläufen über einer einfarbigen background-color gezeichnet. Es gibt nichts zu hosten und keine zusätzliche HTTP-Anfrage: die gesamte Textur lebt im Stylesheet. Ein Punktemuster sieht zum Beispiel so aus:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

Das CSS wiederholt das Motiv über die Hintergrundfläche. Der eingestellte Abstand verändert die Dichte des Musters, nicht die Größe jeder Linie oder jedes Punkts. Bei bestimmten Zoomstufen oder Bruchteilen von Gerätepixeln können an Wiederholungskanten feine Übergänge sichtbar werden.

Woraus jedes Motiv besteht

Tipps zu Farbe und Kontrast

• Halten Sie den Kontrast bei Hintergründen niedrig. Eine Musterfarbe nahe der Hintergrundfarbe wirkt als dezente, professionelle Textur. Hoher Kontrast konkurriert mit Ihrem eigentlichen Inhalt.
• Passen Sie es an Ihre Marke an. Verwenden Sie statt schlichtem Grau eine Markenfarbe als Musterfarbe, damit die Textur zu Ihrer Identität passt.
• Dark Mode. Wechseln Sie zu einer dunklen Hintergrundfarbe und einer etwas helleren Musterfarbe. Muster mit vollem Kontrast wirken auf dunklen Flächen unruhig.
• Prüfen Sie Text auf jeder verwendeten Farbe. Ein geringer Kontrast zwischen den beiden Hintergrundfarben garantiert keinen ausreichenden Textkontrast. Prüfen Sie die Textfarbe sowohl auf der Grundfarbe als auch auf der Musterfarbe. Dieses Tool führt keine WCAG-Kontrastprüfung durch.

Wo Sie es einsetzen

• Hero- und Abschnittshintergründe, die etwas Textur ohne Bild brauchen.
• Karten und Panels in einem Dashboard, wo ein zartes Raster oder Punkte Struktur geben.
• Leerzustände und Platzhalter, wo ein Schachbrett neutral wirkt.
• Layouts im Druckstil und Folien, die einen Millimeterpapier- oder Kreuzschraffur-Look verlangen.

Da die Ausgabe nur aus CSS besteht, ist keine separate Bildanfrage erforderlich. Sie können den Code anschließend direkt in den Entwicklertools Ihres Browsers anpassen.