Design / CSS

CSS-Mustergenerator (Streifen, Punkte, Raster, Schachbrettmuster)

Erstelle sich wiederholende Hintergrundmuster ausschließlich mit CSS-Verläufen: Streifen, diagonale Streifen, Rasterlinien, Punkte, Schachbrett- und Zickzackmuster – mit deinen eigenen zwei Farben, der gewünschten Größe und Linienbreite. Kopiere anschließend-?

CSS-Mustergenerator (Streifen, Punkte, Raster, Schachbrettmuster): Jedes Muster besteht aus einem oder zwei CSS-Verläufen, die sich in der von dir gewählten Größe wiederholen: repeating-linear-gradient für Streifen, zwei sich kreuzende lineare Verläufe für ein Raster, radial-gradient für Punkte und repeating-conic-gradient für ein Schachbrettmuster. Es gibt keine Bilddatei. Dadurch bleibt das Muster bei jeder Zoomstufe scharf und verursacht keine Ladegröße. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
CSS-Muster-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Jedes Muster wird ausschließlich mit CSS-Verläufen gezeichnet. Daher gibt es kein Bild zum Herunterladen, es bleibt bei jeder Vergrößerung scharf und die Farben lassen sich im Stylesheet ändern. Halte Muster hinter Text dezent: Ein geringer Kontrast zwischen den beiden Farben sorgt für gute Lesbarkeit.

So wird ein Schachbrettmuster gezeichnet

repeating-conic-gradient(#000 0 25%, transparent 0 50%) füllt das erste und dritte Viertel einer Drehung um die Mitte jeder Kachel. Dadurch entstehen zwei diagonale Quadrate pro Kachel; background-size legt die Kachel auf die doppelte Quadratgröße fest.

Muster kombinieren

Hintergrundbilder werden übereinandergelegt: Füge einen Verlauf aus dem CSS-Verlaufsgenerator nach einem Muster ein und trenne beide durch ein Komma. Das Muster liegt dann über dem Verlauf.

So benutzt du es

  1. Wähle ein Muster.
  2. Wähle die beiden Farben, die Wiederholungsgröße und die Linienbreite oder Punktgröße.
  3. Kopiere das CSS.

Datenschutz & Einschränkungen

Alles läuft in deinem Browser.

Ähnliche Tools

CSS-FarbverlaufSVG-WelleGlassmorphism

Häufige Fragen

Funktionieren die Muster in jedem Browser?

Ja: Jeder aktuelle Browser unterstützt diese Verläufe, einschließlich des Kegelverlaufs für das Schachbrettmuster.

Wie setze ich ein Muster hinter Text?

Wähle zwei ähnliche Farben, damit das Muster dezent bleibt und der Text ausreichend Kontrast behält.

Kann ich den Winkel der Streifen ändern?

Ja: Ändere den Winkel in repeating-linear-gradient im kopierten CSS, zum Beispiel auf 60deg statt 45deg.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig