Punkte
Gemischte Punkte als CSS-Muster
Grosse und kleine Punkte in zwei Farben, locker im Wechsel.
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: radial-gradient(circle 9px at 14px 14px, #047857 0px 8px, transparent 9px), radial-gradient(circle 9px at 42px 42px, #f59e0b 0px 8px, transparent 9px), radial-gradient(circle 4px at 42px 14px, #f59e0b 0px 3px, transparent 4px), radial-gradient(circle 4px at 14px 42px, #047857 0px 3px, transparent 4px);
background-size: 56px 56px, 56px 56px, 56px 56px, 56px 56px;
background-position: 0 0, 0 0, 0 0, 0 0;Tailwind
bg-[#ecfdf5] [background-image:radial-gradient(circle_9px_at_14px_14px,_#047857_0px_8px,_transparent_9px),_radial-gradient(circle_9px_at_42px_42px,_#f59e0b_0px_8px,_transparent_9px),_radial-gradient(circle_4px_at_42px_14px,_#f59e0b_0px_3px,_transparent_4px),_radial-gradient(circle_4px_at_14px_42px,_#047857_0px_3px,_transparent_4px)] [background-size:56px_56px,_56px_56px,_56px_56px,_56px_56px] [background-position:0_0,_0_0,_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.