Skip to main content

CSS Pattern Generator

Create repeating CSS background patterns with visual presets.

Geprüft von · Zuletzt geprüft

20px
100%
CSS
background: repeating-linear-gradient(
  45deg,
  #3b82f6 0px,
  #3b82f6 20px,
  #ffffff 20px,
  #ffffff 40px
);
opacity: 1;

Ein Muster erstellen

  1. Wähle eine Muster-Voreinstellung aus dem Dropdown - Streifen, Punkte, Raster, Schachbrett, Zickzack, Rauten, Dreiecke. Jede Voreinstellung ist ein reines CSS-Rezept, das aus sich wiederholenden Gradienten erstellt wurde, ohne Bilder.
  2. Lege primäre und sekundäre Farben fest. Primär ist die Motivfarbe (der Punkt, Streifen oder die Form); Sekundär ist das Hintergrundfeld dahinter.
  3. Passe die Skalierung an, um die Kachelgröße zu ändern. Das bildet auf den background-size-Wert in der Ausgabe ab - kleinere Werte ergeben ein dichteres Muster, größere Werte ergeben fettere geometrische Blöcke.
  4. Stimme die Deckkraft ab, um das Motiv zu weichen. Intern wird das zu einem Alpha-Kanal auf der Primärfarbe statt zu einer separaten opacity-Deklaration, sodass das sekundäre Feld vollständig undurchsichtig bleibt.
  5. Kopiere CSS, um das vollständige background-image plus background-size (und manchmal background-position) in dein Stylesheet zu ziehen.

Der Gradient-Trick, der Muster möglich macht

Jedes Muster in diesem Generator ist eine Komposition aus linear-gradient(), radial-gradient() oder repeating-linear-gradient() aus CSS Images Module Level 3, durch kommagetrennte background-image-Werte überlagert und mit einer festen background-size gekachelt. Streifen sind ein Zwei-Stopp-repeating-linear-gradient. Punkte sind ein radial-gradient mit transparentem Abfall, gekachelt. Rasterlinien sind zwei orthogonale sich wiederholende Gradienten übereinander gestapelt. Ein Schachbrettmuster ist ein Paar von 45-Grad-Gradienten, um eine halbe Kachel versetzt, oder ein CSS-background-image, das aus vier linearen Gradienten aufgebaut ist.

Da alles zur Malzeit synthetisiert wird, skalieren Muster ohne Pixelierung auf jede Behältergröße, passen sich sofort über CSS-benutzerdefinierte Eigenschaften an und wiegen null Bytes über die Leitung. Der Browser rastert eine einzige Kachel einmal in einen internen Cache und wiederholt sie dann über das Element, sodass die Laufzeitkosten ein einziges Kachelmalen plus günstiges GPU-Kacheln sind - praktisch kostenlos verglichen mit einem gekachelten PNG, das durch Netzwerk + Decode + Malen muss. Der Vorbehalt: Sehr komplexe mehrschichtige Muster auf riesigen Elementen können große Backing-Store-Texturen erzeugen. Das Compositor-Limit von Chrome liegt auf den meisten GPUs bei etwa 8192 Pixeln auf einer Seite, was in der Praxis selten ein Problem ist.

Wann ein CSS-Muster ein Bild schlägt

  • Themenbezogene Hintergründe, die der Hell-/Dunkel-Präferenz des Benutzers folgen, ohne zwei PNGs zu versenden.
  • Hero-Dekorationen, die sich über jede Viewport-Breite erstrecken müssen, ohne Wiederholungsnahtstellen.
  • Druckfreundliche Hintergründe, die kein separates @media print-Asset benötigen.
  • Lade-Platzhalter, kombiniert mit animation für einen Barber-Pole- oder Shimmer-Effekt.
  • Niedrig-Daten-Szenarien - Muster verwenden ~100 Bytes CSS gegenüber 10-100 KB PNG.
  • Schnelle Iteration während der Design-Exploration, bei der das Neuerzeugen eines Muster-Assets einen Roundtrip durch Figma oder Illustrator erfordern würde.

Randfälle, die du kennen solltest

  • Nahtstellen-Ausrichtung bei gekachelten Hintergründen. Wenn ein Muster nahtlos kacheln muss, müssen die Kachelabmessungen (background-size) genau mit der Wiederholungsperiode des Gradienten übereinstimmen. Ein 20px-Schachbrettmuster mit einer 19,5px-Kachel erzeugt sichtbare Nahtstellen bei jeder Kachel. Verwende ganzzahlige Pixel-Dimensionen und teste bei mehreren zoom-Ebenen.
  • Subpixel-Banding bei bestimmten Zoom-Ebenen. In Browsern, die fraktionale Pixel-Renderung verwenden, können angewinkelte Streifen bei ganzzahligen Pixel-Breiten bei 90 %, 110 % und 125 % Zoom flimmern. Erweitere den Streifen oder entsättige die Farben, um ihn zu verbergen.
  • Leistung bei scrollenden Hintergründen. Ein Vollviewport-Muster mit background-attachment: fixed zwingt den Browser, das Muster bei jedem Scroll-Frame neu zu malen. Verwende background-attachment: scroll (die Standardeinstellung) oder bringe das Element mit will-change: transform auf eine eigene Compositor-Ebene.
  • Alpha über Weiß vs. über Dunkel. Ein 20%-Alpha-Muster sieht auf einem weißen Hintergrund sehr anders aus als auf einem dunklen. Wähle deine Deckkraft, nachdem du die Hintergrundfarbe kennst.
  • Muster-Stapelreihenfolge. Kommagetrennte background-image-Werte stapeln sich mit dem ersten Bild oben - das Gegenteil der typischen z-index-Intuition. Wenn deine Punkte unter den Streifen verschwinden, tausche die Reihenfolge.

Ein Hinweis zur Spezifikation

CSS-Hintergrundmuster stützen sich auf background-image, background-size, background-position und background-repeat aus dem CSS Backgrounds and Borders Module Level 3, plus die Gradient-Funktionen aus CSS Images Module Level 3. Mehrere Hintergrundebenen wurden in CSS3 standardisiert und werden von jedem Browser seit IE9 im Jahr 2011 unterstützt. Die Gradient-Unterstützung ist heute ebenso universell - keine Präfixe nötig, laut caniuse.com/css-gradients. Für moderne Farbkontrolle fügt CSS Color Module Level 4 oklch und Wide-Gamut-Farbraum-Interpolation innerhalb von Gradienten hinzu, nützlich wenn du wahrnehmungsmäßig gleichmäßige Streifen von, sagen wir, Blau zu Pink benötigst. Wenn du echte Textur-Rauschen (Filmkorn, Papierfaser, Gewebeweben) statt geometrischer Wiederholungen benötigst, kann CSS alleine es nicht generieren - du benötigst einen SVG-Filter mit <feTurbulence> oder ein vorgeladenes Rauschen-PNG.

Wann du etwas anderes verwenden solltest

Reine CSS-Muster gewinnen für geometrische Wiederholungen - Raster, Punkte, Streifen, Schachbrettmuster, Rauten. Wo sie verlieren: organische Texturen, nicht-wiederholende Kompositionen und alles, das Zufälligkeit benötigt. Dafür sind vorerzeugte SVG-Muster (aus Figma exportiert oder von einer Ressource wie Hero Patterns verwendet) leicht und bleiben vektorscharf. Für fotografische Texturen (Holzmaserung, Beton, Papier) ist ein WebP- oder AVIF-Bild die richtige Wahl - normalerweise unter 20 KB bei 1x und wahrnehmungsmäßig nicht von der CSS-synthetisierten Alternative zu unterscheiden. Im Vergleich zu Tailwinds rounded-*-Utilities gibt dir handgeschriebenes CSS beliebige Kontrolle und überfüllt deine Klassen-Liste nicht. Für animierte Muster - Barber Poles, verschiebende Raster, Mondrian-ähnliche Raster, die sich umfließen - sind CSS-Muster kombiniert mit @keyframes auf background-position äußerst günstig, oft günstiger als jeder JavaScript- oder Canvas-Ansatz.

Häufig gestellte Fragen

Wie verändern Musterskalierung und Deckkraft das ausgegebene CSS?

Die Skalierung bildet direkt auf den <code>background-size</code>-Wert ab - das Erhöhen der Skalierung von 20px auf 40px verdoppelt die Kachelgröße des gesamten Wiederholungsmusters. Die Deckkraft, trotz des Namens, wird nicht zu einer CSS-<code>opacity</code>-Regel; sie wird zum Alpha-Kanal der Primärfarbe mit <code>rgba()</code> oder <code>oklch(... / a)</code>. Diese Unterscheidung ist wichtig: Eine echte <code>opacity</code>-Regel würde das gesamte Element verblassen lassen, einschließlich des sekundären Feldes, während der Alpha-Trick das Feld vollständig undurchsichtig lässt und nur das Motiv weicher macht.

Warum sind gepunktete und Rastermuster günstiger als ein Bild?

Weil der Browser beim ersten Malen eine einzige Kachel des Musters in seinen Cache rastert und diese dann durch wiederholte GPU-Blits über das Element kachelt. Ein PNG-gestütztes Muster muss über HTTP heruntergeladen, in den Speicher dekodiert, auf die GPU hochgeladen und dann gekachelt werden - jeder Schritt dauert einige Millisekunden auf Mobilgeräten. Ein CSS-Muster überspringt die HTTP- und Decode-Schritte vollständig. Für typische 20-100px-Kacheln liegt die Malkosten unter einer Millisekunde; man erhält praktisch kostenloses Mustern.

Kann ich CSS-Variablen in das generierte Muster verwenden?

Ja, und es ist der empfohlene Ansatz für themenfähige Muster. Nach dem Kopieren des CSS ersetze die wörtlichen Farbwerte durch <code>var(--muster-primaer)</code> und <code>var(--muster-sekundaer)</code>. Da <code>background-image</code> beim Malen aufgelöst wird, löst das Umschalten der Variablen (zum Beispiel durch eine Dunkel-Modus-Klasse) ein sofortiges Neumalen aus, ohne den Gradient-String neu zu erstellen. Du kannst sogar Variablen über <code>@property</code> für sanfte Farbübergänge zwischen Themen animieren.

Sendet dieses Werkzeug meine Musterauswahl irgendwo hin?

Nein. Das Muster-Preset, Farben, Skalierung und Deckkraft leben vollständig im Preact-Komponentenstatus in deinem Browser. Der CSS-String wird aus einem lokalen Template-Literal zusammengestellt; die Vorschau wird über ein Inline-<code>style</code>-Attribut auf einem Vorschau-Div angewendet. Es gibt keinen <code>fetch</code>-Aufruf, kein WebSocket und kein Analytics-Ereignis, das deine Farbauswahl trägt.

Kann ich ein CSS-Muster animieren?

Ja, und es ist einer der günstigsten verfügbaren Animationsstile. Animiere <code>background-position</code> mit einer <code>@keyframes</code>-Regel, um gleitende Streifen (Barber Pole), scrollende Raster oder rotierende Punkte zu erhalten. Da der Browser nur eine vorgeladeene Kachel rekompositionieren muss, bleibst du bei 60fps selbst auf schwacher Hardware. Für Farbverschiebungen im Muster, wick die Motivfarbe in eine CSS-benutzerdefinierte Eigenschaft und übergehe stattdessen diese.

Wie sieht die Browser-Unterstützung für diese Muster aus?

Alle zugrunde liegenden Eigenschaften - <code>background-image</code> mit mehreren Ebenen, <code>background-size</code>, <code>linear-gradient</code>, <code>radial-gradient</code>, <code>repeating-linear-gradient</code> - haben seit etwa 2012 universelle, ohne Präfix gesetzt Unterstützung. caniuse.com/css-gradients berichtet über 98 %+ globale Abdeckung. Die neuere Farbraum-Interpolationssyntax (<code>in oklch</code>) hat engere Unterstützung (Chrome 111+, Safari 16.2+), aber der Generator verwendet standardmäßig einfaches sRGB.

Können Muster barrierefrei sein?

Muster sind von Natur aus dekorativ und Screenreader ignorieren sie, also ist das wichtigste Barrierefreiheits-Anliegen der visuelle Kontrast für den Inhalt, der über dem Muster platziert ist. Führe den Vordergrundtext gegen die dunkelsten und hellsten Punkte des Musters durch einen WCAG-Kontrast-Checker - beide Kombinationen müssen 4,5:1 (normal) oder 3:1 (groß) bestehen. Vermeide feine hochkontrast-Muster hinter Fließtext.

Was ist der Unterschied zwischen repeating-linear-gradient und regulärem linear-gradient für Streifen?

<code>linear-gradient()</code> füllt das gesamte Element mit einer einzigen Rampe. <code>repeating-linear-gradient()</code> kachelt die Rampe vom ersten bis zum letzten Farb-Stopp über das Element, und wiederholt dasselbe Muster auf unbestimmte Zeit. Für Streifen erzeugt <code>repeating-linear-gradient(45deg, rot 0 10px, weiß 10px 20px)</code> eine saubere Wiederholung; das äquivalente <code>linear-gradient</code> würde nur ein Streifen-Paar zeigen, egal wie groß das Element wird. Verwende immer die wiederholende Variante für gekachelte Motive.

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool