Zum Inhalt springen
Musterli

Wellen

Schuppen als CSS-Muster

Überlappende Bögen wie Fischschuppen oder Dachziegel.

Im Editor anpassen

Farben, Grösse und Deckkraft ändern, dann als CSS, SVG oder PNG exportieren.

Code

Füge die Zeilen in die Regel deines Elements ein. Das Muster wiederholt sich von selbst und passt sich jeder Grösse an.

CSS

background-color: #1e1b4b;
background-image: radial-gradient(circle 20.5px at 20px 20px, transparent 0px 17.5px, #a5b4fc 18.5px 19.5px, transparent 20.5px), radial-gradient(circle 20.5px at 20px 20px, transparent 0px 17.5px, #a5b4fc 18.5px 19.5px, transparent 20.5px);
background-size: 40px 20px, 40px 20px;
background-position: 0 0, 20px 10px;

Tailwind

bg-[#1e1b4b] [background-image:radial-gradient(circle_20.5px_at_20px_20px,_transparent_0px_17.5px,_#a5b4fc_18.5px_19.5px,_transparent_20.5px),_radial-gradient(circle_20.5px_at_20px_20px,_transparent_0px_17.5px,_#a5b4fc_18.5px_19.5px,_transparent_20.5px)] [background-size:40px_20px,_40px_20px] [background-position:0_0,_20px_10px]

So verwendest du das Muster

Kopiere das CSS in die Regel des Elements, das das Muster tragen soll, zum Beispiel einen Abschnitt, eine Karte oder den body. Die Farben stehen als Hex-Werte im Code und lassen sich direkt austauschen. Im Editor änderst du alles mit Reglern und exportierst das Muster auch als SVG oder PNG.

Ähnliche Muster

Alle CSS-Muster

  • Wellenringe

    Konzentrische Ringe von der Mitte aus, wie Wellen im Wasser.

    Wellen

  • Sonnenaufgang

    Breite Bögen in zwei Farben, die vom unteren Rand aufsteigen.

    Wellen

  • Wellenlinien

    Weiche Wellenlinien aus Halbkreisen, Reihe um Reihe.

    Wellen

  • Bogenkante

    Halbkreise in Reihen mit kleinem Akzent, wie eine Bogenkante.

    Wellen

  • Regenbogen

    Kleine Regenbögen aus drei Bändern, Reihe für Reihe.

    Wellen

  • Schachbrett

    Quadrate im Wechsel, so klar wie ein Schachbrett.

    Geometrisch