CSS-Hintergrundmuster-Generator

Dieses Tool erzeugt sich wiederholende Hintergrundmuster ausschließlich mit CSS-Verläufen — keine Bilddatei erforderlich. Wähle Punktraster, diagonale Streifen, ein Schachbrett oder Rasterlinien, passe Farben und Abstände an und kopiere den background-image-CSS-Code direkt in dein Stylesheet.

Was ist dieses Tool?

CSS kann sich wiederholende Muster ganz ohne Bilddateien zeichnen, indem Verläufe — radial-gradient() und linear-gradient() — als background-image verwendet werden, kombiniert mit einer background-size, die kleiner ist als das Element, sodass der Verlauf gekachelt wiederholt wird. Punktraster nutzen einen repeating-radial-gradient, Streifen und Schachbrettmuster nutzen wiederholte oder geschichtete linear-gradient()-Angaben, und Rasterlinien entstehen aus zwei überlagerten linear-gradient()-Linien.

Dieses Tool erstellt diese Verlaufsdeklarationen für dich. Wähle einen Mustertyp, passe Musterfarbe, Hintergrundfarbe und Abstand an und beobachte, wie sich die Live-Vorschau aktualisiert — kopiere dann den exakten CSS-Code für background-image und background-size.

Quelle: CSS Images Module Level 3, W3C — definiert repeating-linear-gradient() und repeating-radial-gradient(), die Funktionen, aus denen diese Muster aufgebaut sind.

Warum sollte man es nutzen?

Keine Bilddateien, keine HTTP-Anfragen — das Muster ist reines CSS und wird bei jeder Auflösung sofort dargestellt, auch auf Retina-/High-DPI-Bildschirmen.
Farbe und Abstand vollständig anpassbar, ohne Verlaufssyntax von Hand zu schreiben oder Kachel-Mathematik selbst zu berechnen.
Die Live-Vorschau zeigt das exakte sich wiederholende Muster, bevor du irgendetwas kopierst.
Skaliert sauber, da es sich um Vektormathematik statt um ein Rasterbild handelt — keine Unschärfe, wenn sich die Elementgröße ändert.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Wähle einen Mustertyp: Punktraster, diagonale Streifen, Schachbrett oder Rasterlinien.
Wähle die Musterfarbe und die Hintergrundfarbe, die zwischen/hinter den Musterformen sichtbar ist.
Passe den Größenregler an, um Punkte, Streifen oder Rasterzellen größer oder kleiner zu machen — das steuert auch, wie dicht sich das Muster wiederholt.
Kopiere den generierten CSS-Code und füge ihn als background-image (sowie background-size/background-position, sofern angezeigt) für ein beliebiges Element ein.

Beispiel

Eingabe

Muster: Punktraster · Farbe: Blau · Hintergrund: Weiß · Größe: 24px

Ausgabe

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Ein klassisches, helles Punktraster-Muster, das oft als dezenter Bereichshintergrund oder Kartentextur verwendet wird.

Wie jedes Muster aufgebaut ist

Punktraster: Ein radial-gradient() zeichnet einen kleinen gefüllten Kreis, den background-size dann als gekacheltes Rasterfeld aus Punkten wiederholt.
Diagonale Streifen: Ein repeating-linear-gradient() im 45-Grad-Winkel wechselt in festem Abstand zwischen Musterfarbe und Hintergrundfarbe.
Schachbrett: Zwei überlagerte 45-Grad-linear-gradient()-Ebenen, um eine halbe Kachel gegeneinander versetzt, erzeugen abwechselnd helle/dunkle Quadrate.
Rasterlinien: Zwei dünne linear-gradient()-Linien — eine horizontal, eine vertikal — im gewählten Abstand gekachelt, bilden ein Raster ähnlich Millimeterpapier.

Wann CSS-Muster statt Bilddateien verwenden

Ein CSS-Verlaufsmuster hat weder Dateigröße noch HTTP-Anfrage, lädt daher sofort und wirkt auf High-DPI-Bildschirmen nie unscharf, anders als eine gerasterte PNG-Hintergrundkachel. Es eignet sich ideal für dezente Texturen hinter Text, Bereichstrenner, Illustrationen für Leerzustände oder Platzhalterkarten. Für komplexe illustrative oder fotografische Muster ist ein echtes Bild weiterhin das richtige Werkzeug — CSS-Verläufe eignen sich am besten für einfache, geometrische, sich wiederholende Formen wie die hier gezeigten.

Kombination mit anderen CSS-Effekten

Muster funktionieren gut als Hintergrund hinter Glassmorphism-Karten, da die Weichzeichnung etwas mit visueller Textur im Hintergrund braucht, um sichtbar zu sein. Sie lassen sich außerdem gut mit abgerundeten Ecken am Containerelement kombinieren.

→ CSS-Glassmorphism-Generator · Border-Radius-Generator

Häufig gestellte Fragen

Benötigen diese Muster irgendwelche Bilddateien?

Nein. Jedes Muster hier wird ausschließlich mit CSS-Verläufen als background-image erzeugt — es ist kein PNG, SVG oder sonstige Datei beteiligt, es gibt also keine zusätzliche HTTP-Anfrage und kein Risiko von Unschärfe auf hochauflösenden Bildschirmen.

Kann ich ändern, wie groß das Muster ist?

Ja — der Größenregler steuert die background-size, die festlegt, wie groß eine sich wiederholende Kachel des Musters ist. Eine kleinere Größe rückt Punkte, Streifen oder Rasterzellen enger zusammen; eine größere Größe verteilt sie weiter auseinander.

Warum verwendet das Schachbrettmuster zwei Verläufe?

Ein einzelner linear-gradient() kann Farben nur entlang einer Richtung abwechseln. Erst das Überlagern zweier 45-Grad-Verläufe, die um eine halbe Kachel gegeneinander versetzt sind, erzeugt die abwechselnd hellen/dunklen Quadrate eines Schachbretts — das ist die Standardtechnik für reine CSS-Schachbrettmuster.

Wirkt dieses Muster auf Retina-/High-DPI-Bildschirmen scharf?

Ja. Da das Muster ein mathematischer Verlauf und kein Bitmap-Bild ist, wird es in der Auflösung gerendert, die der Bildschirm benötigt, ohne Hochskalierung oder Unschärfe — anders als eine kleine Rasterbild-Kachel, die bei hoher Pixeldichte gestreckt oder wiederholt wird.

Kann ich diese Muster als Hintergrund für die ganze Seite verwenden?

Ja — wende die generierten Angaben für background-image, background-size und background-position (sofern vorhanden) auf den body oder ein beliebiges Containerelement in voller Breite an. Achte dabei auf den Kontrast: Ein auffälliges, kontrastreiches Muster hinter Fließtext kann die Lesbarkeit beeinträchtigen, daher eignen sich hellere, dezentere Einstellungen meist besser für große Hintergrundflächen.