Streifen
Strichcode als CSS-Muster
Unregelmässige Linien wie ein Strichcode, dekorativ und nicht lesbar.
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: #f1f5f9;
background-image: repeating-linear-gradient(90deg, #334155 0px 4px, transparent 4px 6px, #334155 6px 8px, transparent 8px 12px, #334155 12px 20px, transparent 20px 22px, #334155 22px 24px, transparent 24px 30px, #334155 30px 36px, transparent 36px 38px, #334155 38px 40px, transparent 40px 44px, #334155 44px 48px, transparent 48px 50px, #334155 50px 52px, transparent 52px 60px, #334155 60px 62px, transparent 62px 66px, #334155 66px 72px, transparent 72px 74px, #334155 74px 78px, transparent 78px 82px, #334155 82px 84px, transparent 84px 90px, #334155 90px 98px, transparent 98px 100px, #334155 100px 102px, transparent 102px 106px, #334155 106px 110px, transparent 110px 112px, #334155 112px 114px, transparent 114px 118px);
background-size: 100% 100%;
background-position: 0 0;Tailwind
bg-[#f1f5f9] [background-image:repeating-linear-gradient(90deg,_#334155_0px_4px,_transparent_4px_6px,_#334155_6px_8px,_transparent_8px_12px,_#334155_12px_20px,_transparent_20px_22px,_#334155_22px_24px,_transparent_24px_30px,_#334155_30px_36px,_transparent_36px_38px,_#334155_38px_40px,_transparent_40px_44px,_#334155_44px_48px,_transparent_48px_50px,_#334155_50px_52px,_transparent_52px_60px,_#334155_60px_62px,_transparent_62px_66px,_#334155_66px_72px,_transparent_72px_74px,_#334155_74px_78px,_transparent_78px_82px,_#334155_82px_84px,_transparent_84px_90px,_#334155_90px_98px,_transparent_98px_100px,_#334155_100px_102px,_transparent_102px_106px,_#334155_106px_110px,_transparent_110px_112px,_#334155_112px_114px,_transparent_114px_118px)] [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.