Zum Inhalt springen
Musterli

Streifen

Zuckerstange als CSS-Muster

Zwei Farben mit schmalen Abständen, wie eine Zuckerstange.

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: #fff1f2;
background-image: repeating-linear-gradient(135deg, #e11d48 0px 7.5px, transparent 8.5px 11.5px, #1d4ed8 12.5px 27.5px, transparent 28.5px 31.5px, #e11d48 32.5px 40px);
background-size: 100% 100%;
background-position: 0 0;

Tailwind

bg-[#fff1f2] [background-image:repeating-linear-gradient(135deg,_#e11d48_0px_7.5px,_transparent_8.5px_11.5px,_#1d4ed8_12.5px_27.5px,_transparent_28.5px_31.5px,_#e11d48_32.5px_40px)] [background-size:100%_100%] [background-position:0_0]

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

  • Streifen

    Breite Streifen in einem frei wählbaren Winkel.

    Streifen

  • Nadelstreifen

    Feine Linien mit viel Abstand, elegant und zurückhaltend.

    Streifen

  • Vichy-Karo

    Halbtransparente Streifen in beide Richtungen ergeben das typische Karo.

    Streifen

  • Schottenkaro

    Breite und schmale Streifen in zwei Farben, gekreuzt wie ein Karostoff.

    Streifen

  • Strichcode

    Unregelmässige Linien wie ein Strichcode, dekorativ und nicht lesbar.

    Streifen