Zum Inhalt springen
Musterli

CSS-Muster

Über 30 Muster aus reinem CSS: Punkte, Raster, Streifen, Wellen und Geometrie. Als CSS, Tailwind, SVG oder Bild exportieren.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem CSS-Muster

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

CSS-Muster sind Hintergründe, die der Browser selbst aus Verläufen zeichnet. Sie brauchen keine Bilddatei, laden sofort, bleiben in jeder Grösse scharf und lassen sich mit ein paar Zeichen CSS umfärben. Die Bibliothek enthält über 30 eigene Muster in fünf Kategorien.

So geht’s

Wähle ein Muster, stelle Grösse, Farben und Deckkraft ein und drehe Streifen oder Raster in den passenden Winkel. Staple bis zu fünf Muster als Ebenen übereinander, blende sie ein und aus oder ändere ihre Reihenfolge. Mit der Leertaste würfelst du neue Varianten. Kopiere am Schluss das CSS oder die Tailwind-Klassen, oder exportiere als SVG, PNG, JPG oder WebP.

CSS-Muster jetzt ausprobieren

Häufige Fragen

Brauche ich für die Muster ein Bild?
Nein. Jedes Muster besteht nur aus CSS-Verläufen in background-image. Das spart Ladezeit und bleibt auf jedem Bildschirm scharf.
In welchen Browsern funktionieren die Muster?
In allen aktuellen Browsern, also Chrome, Edge, Firefox und Safari. Die Muster nutzen lineare, radiale und konische Verläufe, die seit Jahren breit unterstützt werden.
Wie genau ist der SVG-Export?
Das SVG zeichnet dieselbe Geometrie mit SVG-Verläufen und Kacheln nach. Unterschiede gibt es höchstens bei der Kantenglättung einzelner Pixel. Für ein Bild ohne jede Abweichung nimm den PNG-Export.
Kann ich die Muster mit Tailwind verwenden?
Ja. Der Export liefert Tailwind-Klassen mit beliebigen Werten, die du direkt in dein HTML kopierst. Sie funktionieren mit Tailwind 3 und 4.
Darf ich die Muster kommerziell nutzen?
Ja. Was du mit Musterli erstellst, gehört dir und darf in eigenen und kommerziellen Projekten verwendet werden.

Passende Generatoren

Alle Generatoren in CSS-Muster