Zum Inhalt springen
Musterli

Geometrisch

Chevron als CSS-Muster

Zickzackbänder in zwei Farben und dem Hintergrund, im Stil der Siebziger.

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: #fef3c7;
background-image: linear-gradient(315deg, #0f766e 0% 24.26%, transparent 25.74% 100%), linear-gradient(45deg, #0f766e 0% 24.26%, transparent 25.74% 100%), linear-gradient(135deg, #0f766e 0% 24.26%, transparent 25.74% 100%), linear-gradient(225deg, #0f766e 0% 24.26%, transparent 25.74% 100%), linear-gradient(315deg, #b45309 0% 24.26%, transparent 25.74% 100%), linear-gradient(45deg, #b45309 0% 24.26%, transparent 25.74% 100%), linear-gradient(135deg, #b45309 0% 24.26%, transparent 25.74% 100%), linear-gradient(225deg, #b45309 0% 24.26%, transparent 25.74% 100%);
background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px;
background-position: 24px 36px, 24px 36px, 0px 36px, 0px 36px, 24px 24px, 24px 24px, 0px 24px, 0px 24px;

Tailwind

bg-[#fef3c7] [background-image:linear-gradient(315deg,_#0f766e_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(45deg,_#0f766e_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(135deg,_#0f766e_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(225deg,_#0f766e_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(315deg,_#b45309_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(45deg,_#b45309_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(135deg,_#b45309_0%_24.26%,_transparent_25.74%_100%),_linear-gradient(225deg,_#b45309_0%_24.26%,_transparent_25.74%_100%)] [background-size:48px_48px,_48px_48px,_48px_48px,_48px_48px,_48px_48px,_48px_48px,_48px_48px,_48px_48px] [background-position:24px_36px,_24px_36px,_0px_36px,_0px_36px,_24px_24px,_24px_24px,_0px_24px,_0px_24px]

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

  • Schachbrett

    Quadrate im Wechsel, so klar wie ein Schachbrett.

    Geometrisch

  • Rauten

    Auf die Spitze gestellte Quadrate in einem dichten Raster.

    Geometrisch

  • Argyle

    Rauten mit feinen Diagonalen, bekannt von Socken und Pullovern.

    Geometrisch

  • Zickzack

    Kräftige Zickzackbänder, die quer über die Fläche laufen.

    Geometrisch

  • Dreiecke

    Jede Kachel diagonal geteilt, das ergibt Reihen aus Dreiecken.

    Geometrisch

  • Windrad

    Vier Flügel pro Kachel, die sich zu Windrädern drehen.

    Geometrisch