Raster
Backsteine als CSS-Muster
Mauerwerk im Läuferverband, gezeichnet als Fugen.
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: #fff1f2;
background-image: linear-gradient(180deg, #e11d48 0px 2px, transparent 2px 24px, #e11d48 24px 26px, transparent 26px 48px), conic-gradient(from 270deg at 2px 22px, #e11d48 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 2px 22px, #e11d48 0deg 90deg, transparent 90deg 360deg);
background-size: 48px 48px, 48px 48px, 48px 48px;
background-position: 0 0, 0px 2px, 24px 26px;Tailwind
bg-[#fff1f2] [background-image:linear-gradient(180deg,_#e11d48_0px_2px,_transparent_2px_24px,_#e11d48_24px_26px,_transparent_26px_48px),_conic-gradient(from_270deg_at_2px_22px,_#e11d48_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_2px_22px,_#e11d48_0deg_90deg,_transparent_90deg_360deg)] [background-size:48px_48px,_48px_48px,_48px_48px] [background-position:0_0,_0px_2px,_24px_26px]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.