CSS-Muster-Generator
Hintergrundmuster nur mit CSS: Streifen, Punkte, Raster, Schachbrett, Zickzack und Rauten mit Farben und Größe einstellen.
Der CSS-Muster-Generator erzeugt Hintergrundmuster ganz ohne Bilddateien: Streifen in beliebigem Winkel, Punkte, Polka, Raster, Schachbrett, Zickzack, Rauten und Kreuzschraffur. Du wählst Vorder- und Hintergrundfarbe, Deckkraft, Kachelgröße und Linienstärke. Das Ergebnis besteht nur aus CSS-Verläufen, skaliert verlustfrei und lädt ohne zusätzliche Anfrage.
.pattern {
background-color: #dbeafe;
background-image: repeating-linear-gradient(45deg, #2563eb 0 8px, transparent 8px 24px);
}Muster aus CSS-Verläufen
Jedes Muster ist eine kleine Kachel aus einem oder mehreren Verläufen, die über background-size wiederholt wird. Liegen zwei Farbstopps an derselben Position, entsteht
eine harte Kante statt eines weichen Übergangs.
| Muster | Grundlage |
|---|---|
| Streifen | repeating-linear-gradient |
| Punkte, Polka | radial-gradient mit harter Kante |
| Raster | Zwei linear-gradient (waagerecht und senkrecht) |
| Schachbrett | repeating-conic-gradient |
| Zickzack, Rauten | Vier diagonale Dreiecksverläufe |
Weiche Farbflächen erstellst du im Mesh-Gradient-Generator, einfache Verläufe im Gradient-Generator.
Häufige Fragen
Wie entstehen Muster ohne Bilder?
CSS-Verläufe können harte Kanten haben, wenn zwei Farbstopps an derselben Position liegen. Wiederholt man so einen Verlauf über background-size als Kachel, entstehen Streifen, Punkte oder Raster. Mehrere Verläufe übereinander ergeben komplexere Muster.
Sind CSS-Muster performant?
Ja, sie brauchen keine Netzwerkanfrage und sind gestochen scharf auf jedem Bildschirm. Sehr kleine Kacheln auf riesigen Flächen können beim Scrollen etwas Rechenzeit kosten, für normale Hintergründe ist das unproblematisch.
Wie lege ich ein Muster dezent hinter Text?
Senke die Deckkraft der Vordergrundfarbe auf 5 bis 15 % und wähle als Hintergrund dieselbe Farbe wie die Seite. So bleibt Text gut lesbar. Den Kontrast prüfst du im Farbkontrast-Prüfer.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.