CSS Muster Generator
Erstellen Sie CSS-Hintergrundmuster sofort. Wählen Sie Punkte, Linien, Gitter, Schachbrett oder Diagonal — kopieren Sie das CSS und verwenden Sie es überall.
① Mustertyp wählen ② Größe und Farben anpassen ③ CSS kopieren
Musterfarbe
#C9B89A
Hintergrundfarbe
#0E0E0E
So funktioniert es
Jedes Muster wird mit reinen CSS-Verläufen erstellt — keine Bilder, kein SVG. Punkte verwenden radial-gradient, Linien und Diagonal verwenden repeating-linear-gradient, das Gitter verwendet zwei gekreuzte linear-gradients, und das Schachbrett verwendet conic-gradient.
Größensteuerung
Der Größen-Schieberegler legt die background-size-Kachel fest. Größere Kacheln erzeugen ein lockereres Muster; kleinere Kacheln erzeugen eine dichtere Textur.
Nur CSS
Das generierte CSS verwendet nur background-image und background-size und ist mit jedem HTML-Element und allen modernen Browsern kompatibel.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
Was ist ein CSS-Hintergrundmuster?
CSS-Hintergrundmuster sind sich wiederholende visuelle Texturen, die vollständig mit CSS-Verläufen erstellt werden — keine Bilder erforderlich. Mit radial-gradient, linear-gradient und conic-gradient können Sie Punkte, Linien, Gitter, Schachbretter und diagonale Streifen erzeugen, die nahtlos kacheln. Diese Technik wird in allen modernen Browsern unterstützt und erzeugt keine zusätzlichen HTTP-Anfragen.
Häufig gestellte Fragen
Ein CSS-Hintergrundmuster ist eine sich wiederholende visuelle Textur, die vollständig mit CSS-Gradientfunktionen generiert wird — keine Bilder oder SVG erforderlich. Durch Kombinieren von radial-gradient, linear-gradient, repeating-linear-gradient und conic-gradient mit background-size entstehen nahtlose Punkte, Linien, Gitter, Schachbretter und diagonale Streifen.
Das Punktmuster verwendet radial-gradient, um einen kleinen gefüllten Kreis in der Mitte jeder Kachel zu zeichnen, mit transparenter Füllung für den Rest. Durch Setzen von background-size auf die Kachelmaße wiederholen sich die Punkte in einem regelmäßigen Raster.
Das Linienmuster verwendet einen einzelnen repeating-linear-gradient in einer Richtung und erzeugt parallele horizontale Linien. Das Gittermuster verwendet zwei senkrecht übereinandergelegte linear-gradients und erzeugt ein Kreuzgitter mit Linien in beide Richtungen.
Die Funktion conic-gradient erzeugt eine Viertelkreisrotation, bei der abwechselnde Viertel mit der Muster- oder Hintergrundfarbe gefüllt werden. Durch Setzen von background-size auf das Doppelte der Kachelgröße kacheln die vier Viertel zu einem perfekten Schachbrett.
Alle fünf Muster verwenden Gradientfunktionen, die in allen modernen Browsern unterstützt werden. Das für Schachbrett verwendete conic-gradient erfordert Chrome 69+, Firefox 83+ und Safari 12.1+.
Kopieren Sie das generierte CSS und wenden Sie es auf jedes HTML-Element an. Sie können es inline über das style-Attribut oder in einer CSS-Klasse hinzufügen. Für einen ganzseitigen Hintergrund wenden Sie es auf body oder ein festes div an.
Das Tool unterstützt 5 Mustertypen: Punkte, Linien, Gitter, Schachbrett und Diagonal. Jeder ist mit einer beliebigen Kachelgröße (4–40px) und vollständig benutzerdefinierten Farben konfigurierbar.