Zum Inhalt springen
Musterli

Raster

Millimeterpapier als CSS-Muster

Feines Nebenraster mit kräftigem Hauptraster alle fünf Felder.

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: #f8f5ee;
background-image: repeating-linear-gradient(0deg, #1f3a5f 0px 2px, transparent 2px 80px), repeating-linear-gradient(90deg, #1f3a5f 0px 2px, transparent 2px 80px), repeating-linear-gradient(0deg, #e07a5f99 0px 1px, transparent 1px 16px), repeating-linear-gradient(90deg, #e07a5f99 0px 1px, transparent 1px 16px);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;

Tailwind

bg-[#f8f5ee] [background-image:repeating-linear-gradient(0deg,_#1f3a5f_0px_2px,_transparent_2px_80px),_repeating-linear-gradient(90deg,_#1f3a5f_0px_2px,_transparent_2px_80px),_repeating-linear-gradient(0deg,_#e07a5f99_0px_1px,_transparent_1px_16px),_repeating-linear-gradient(90deg,_#e07a5f99_0px_1px,_transparent_1px_16px)] [background-size:100%_100%,_100%_100%,_100%_100%,_100%_100%] [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.

Ähnliche Muster

Alle CSS-Muster

  • Rasterlinien

    Feine Linien im Quadratraster, frei drehbar.

    Raster

  • Kreuzschraffur

    Diagonale Linien in beide Richtungen, wie ein Gitter oder eine Schraffur.

    Raster

  • Backsteine

    Mauerwerk im Läuferverband, gezeichnet als Fugen.

    Raster

  • Fliesen

    Quadratische Fliesen in zwei Farben mit schmalen Fugen.

    Raster

  • Streifen

    Breite Streifen in einem frei wählbaren Winkel.

    Streifen