Zum Inhalt springen
Musterli

Punkte

Zweifarbige Punkte als CSS-Muster

Versetzte Punkte im Wechsel zweier Farben.

Im Editor anpassen

Farben, 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: #0f172a;
background-image: radial-gradient(circle 5.5px at 10px 10px, #38bdf8 0px 4.5px, transparent 5.5px), radial-gradient(circle 5.5px at 30px 30px, #f472b6 0px 4.5px, transparent 5.5px);
background-size: 40px 40px, 40px 40px;
background-position: 0 0, 0 0;

Tailwind

bg-[#0f172a] [background-image:radial-gradient(circle_5.5px_at_10px_10px,_#38bdf8_0px_4.5px,_transparent_5.5px),_radial-gradient(circle_5.5px_at_30px_30px,_#f472b6_0px_4.5px,_transparent_5.5px)] [background-size:40px_40px,_40px_40px] [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.

Ähnliche Muster

Alle CSS-Muster

  • Punkte

    Gleichmässige Punkte in einem Raster, der Klassiker für verspielte Flächen.

    Punkte

  • Versetzte Punkte

    Punkte in versetzten Reihen, dichter und ruhiger als ein gerades Raster.

    Punkte

  • Gemischte Punkte

    Grosse und kleine Punkte in zwei Farben, locker im Wechsel.

    Punkte

  • Ringe

    Kreisringe in einem Raster, leicht und luftig.

    Punkte

  • Zielscheiben

    Konzentrische Ringe in zwei Farben, wie kleine Zielscheiben.

    Punkte

  • Rasterlinien

    Feine Linien im Quadratraster, frei drehbar.

    Raster