Streifen
Schottenkaro als CSS-Muster
Breite und schmale Streifen in zwei Farben, gekreuzt wie ein Karostoff.
Im Editor anpassenFarben, 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: #ecfdf5;
background-image: repeating-linear-gradient(0deg, #04785780 0px 24px, transparent 24px 36px, #f59e0bcc 36px 40px, transparent 40px 44px, #f59e0bcc 44px 48px, transparent 48px 60px, #0478574d 60px 68px, transparent 68px 80px), repeating-linear-gradient(90deg, #04785780 0px 24px, transparent 24px 36px, #f59e0bcc 36px 40px, transparent 40px 44px, #f59e0bcc 44px 48px, transparent 48px 60px, #0478574d 60px 68px, transparent 68px 80px);
background-size: 100% 100%, 100% 100%;
background-position: 0 0, 0 0;Tailwind
bg-[#ecfdf5] [background-image:repeating-linear-gradient(0deg,_#04785780_0px_24px,_transparent_24px_36px,_#f59e0bcc_36px_40px,_transparent_40px_44px,_#f59e0bcc_44px_48px,_transparent_48px_60px,_#0478574d_60px_68px,_transparent_68px_80px),_repeating-linear-gradient(90deg,_#04785780_0px_24px,_transparent_24px_36px,_#f59e0bcc_36px_40px,_transparent_40px_44px,_#f59e0bcc_44px_48px,_transparent_48px_60px,_#0478574d_60px_68px,_transparent_68px_80px)] [background-size:100%_100%,_100%_100%] [background-position:0_0,_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.