Raster
Fliesen als CSS-Muster
Quadratische Fliesen in zwei Farben mit schmalen 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: #ecfdf5;
background-image: conic-gradient(from 270deg at 37px 37px, #047857 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #047857 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #f59e0b 0deg 90deg, transparent 90deg 360deg), conic-gradient(from 270deg at 37px 37px, #f59e0b 0deg 90deg, transparent 90deg 360deg);
background-size: 80px 80px, 80px 80px, 80px 80px, 80px 80px;
background-position: 1.5px 1.5px, 41.5px 41.5px, 41.5px 1.5px, 1.5px 41.5px;Tailwind
bg-[#ecfdf5] [background-image:conic-gradient(from_270deg_at_37px_37px,_#047857_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#047857_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#f59e0b_0deg_90deg,_transparent_90deg_360deg),_conic-gradient(from_270deg_at_37px_37px,_#f59e0b_0deg_90deg,_transparent_90deg_360deg)] [background-size:80px_80px,_80px_80px,_80px_80px,_80px_80px] [background-position:1.5px_1.5px,_41.5px_41.5px,_41.5px_1.5px,_1.5px_41.5px]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.