CSS-Hintergrundmuster-Generator - Streifen, Punkte, Raster & mehr kostenlos

Erstellen Sie CSS-Hintergrundmuster wie Streifen, Punkte, Schachbrett, Diagonalen, Raster und Zickzack mit benutzerdefinierten Farben und Größe

CSS-Werkzeuge

Tool

Pattern

Color 1

#6366f1

Color 2

#1e293b

Size (20px)

CSS

background-image: repeating-linear-gradient(0deg, #6366f1 0px, #6366f1 10px, #1e293b 10px, #1e293b 20px);
background-size: 20px 20px;

Anleitung

1Klicken Sie auf eines der 6 Muster-Vorlagen (Streifen, Punkte, Schachbrett, Diagonal, Raster, Zickzack)
2Wählen Sie Ihre zwei Farben mit den Farbwählern
3Passen Sie den Größenregler an, um die Musterdichte zu steuern
4Kopieren Sie die generierten CSS-Hintergrundeigenschaften in Ihr Stylesheet

Häufig gestellte Fragen

CSS-Hintergrundmuster verwenden repeating-linear-gradient und radial-gradient-Funktionen, um geometrische Formen zu kacheln. Es sind keine Bilder erforderlich — alles ist reines CSS.

Ja. Die verwendeten Gradient-Funktionen werden in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Der Generator verwendet Hex-Farben. Für Transparenzeffekte können Sie den kopierten CSS-Code manuell bearbeiten und rgba() oder Hex-Farben mit Alphakanal verwenden.

Der Größenregler steuert die backgroundSize, die bestimmt, wie groß jede sich wiederholende Kachel ist. Kleinere Werte erzeugen ein dichteres Muster; größere Werte verteilen das Muster weiter.

Häufig gestellte Fragen

CSS-Hintergrundmuster verwenden repeating-linear-gradient und radial-gradient-Funktionen, um geometrische Formen zu kacheln. Es sind keine Bilder erforderlich — alles ist reines CSS.

Ja. Die verwendeten Gradient-Funktionen werden in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Der Generator verwendet Hex-Farben. Für Transparenzeffekte können Sie den kopierten CSS-Code manuell bearbeiten und rgba() oder Hex-Farben mit Alphakanal verwenden.

Der Größenregler steuert die backgroundSize, die bestimmt, wie groß jede sich wiederholende Kachel ist. Kleinere Werte erzeugen ein dichteres Muster; größere Werte verteilen das Muster weiter.