CSS-Muster-Generator

CSS-Hintergrundmuster

Ein CSS-Hintergrundmuster ist ein gekacheltes Bild (Streifen, Punkte, Raster, Schachbretter, Dreiecke) vollständig mit CSS-Gradient-Funktionen und ohne Bilddatei gezeichnet. Drei Eigenschaften erledigen die ganze Arbeit: background-image malt ein beliebiges Gradient-Bild in das Element, background-size setzt die Größe einer Kachel dieses Bildes, und background-repeat (das standardmäßig repeat ist) kachelt dieses Bild über beide Achsen. background-position versetzt dann die Naht, sodass die Kachel jeder Schicht mit den anderen ausgerichtet ist. Ein Muster ist also nur mehrere Gradient-Bilder, die übereinander gestapelt sind, jedes auf dieselbe Kachel dimensioniert, jedes so positioniert, dass sie ineinandergreifen. Browser malen kommagetrennte background-image-Werte von vorne nach hinten, also liegt das erste Bild der Liste über dem zweiten, das zweite über dem dritten, und so weiter.

Das ganze Genre existiert dank eines syntaktischen Tricks: harte Farbstopps. Benachbarte Farbstopps an derselben Position erzeugen einen sofortigen Übergang statt einer Mischung. linear-gradient(red 50%, blue 50%) ist kein Übergang von Rot zu Blau, es ist eine scharfe Linie. Ohne harte Stopps bekommt man einen weichen Gradienten; mit ihnen bekommt man Geometrie. Streifen, Punkte, Schachbretter, Dreiecke, Chevrons, jedes Muster, das dieses Tool emittiert, ist aus dieser einzigen Eigenschaft gebaut, in verschiedenen Winkeln und Kachelgrößen angewendet.

Eine kurze Geschichte, Lea Verou und die Patterns Gallery

Wenn eine einzige Ressource für das ganze Genre der reinen CSS-Hintergrundmuster verantwortlich ist, dann ist es die CSS3 Patterns Gallery von Lea Verou, ursprünglich gehostet auf lea.verou.me/css3patterns/. Verou hatte 2010 und Anfang 2011 einzelne Demos veröffentlicht, darunter ein gefeiertes Schachbrett-Walkthrough im Februar 2011, bevor sie die Galerie selbst am 15. April 2011 in einem Beitrag mit dem Titel „CSS3 patterns gallery and a new pattern“ ankündigte (das neue Muster war ein japanisches Würfel-Design, das sie als das schwierigste bezeichnete, das sie je gemacht habe). Wenige Monate später, am 1. Dezember 2011, schrieb sie den kanonischen Essay „CSS3 Patterns, Explained“ für den 24-ways-Adventskalender, bis heute die beste Erklärung in klarer Sprache der Hard-Color-Stop-Technik, die jeder Streifen, Tupfen und Schachbrett-Muster zugrunde liegt. Im Juni 2015 veröffentlichte O’Reilly ihr Buch CSS Secrets: Better Solutions to Everyday Web Design Problems, das das Muster-Kapitel zu einer vollständigen Taxonomie erweiterte. Die breitere kulturelle Wirkung der Galerie ist in Verous eigenen Projektnotizen dokumentiert: sie „startete die weit verbreitete Praxis, harte Stopps in CSS-Gradienten zu verwenden, um leicht Hintergrundmuster und andere Grafiken zu erzeugen“ und wurde später von den Ingenieuren von Opera Software verwendet, um ihre Gradient-Implementierung feinzuabstimmen.

Vom Vendor-Präfix zur Spezifikation

CSS-Gradienten sind im CSS Image Values and Replaced Content Module Level 3 definiert (üblicherweise „CSS Images 3“), gepflegt von der W3C CSS Working Group und herausgegeben unter anderem von Tab Atkins Jr. und Elika J. Etemad. Der First Public Working Draft datiert auf den 12. Juli 2011; die Spec erreichte im April 2012 Candidate Recommendation und legte die moderne unprefixed Syntax fest, einschließlich der Konvention, dass 0deg nach oben zeigt und to right gleich 90deg ist. Browser-Auslieferungsreihenfolge: WebKit war mit großem Abstand zuerst, mit -webkit-gradient() nutzbar in Safari 4 (2009); Firefox lieferte -moz-linear-gradient() in Firefox 3.6 (21. Januar 2010); Internet Explorer 10 lieferte die unprefixed Formen 2012; die unprefixed Syntax stabilisierte sich Ende 2013 über alle großen Engines hinweg. conic-gradient() wurde in CSS Images Level 4 spezifiziert, weil Level 3 bereits in Last Call eingegangen war, als die Syntax entworfen wurde; sie wurde in Chrome 69 (4. September 2018), Safari 12.1 (25. März 2019) und Firefox 83 (17. November 2020) ausgeliefert. 2026 kann man background: linear-gradient(...) und background: conic-gradient(...) getrost ohne Präfixe und ohne Fallbacks für jeden unterstützenswerten Browser schreiben.

linear-gradient: Winkel und Seiten

Die formale Grammatik ist linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Die Winkelkonvention bringt Entwickler oft zum Stolpern, weil sie sich von der SVG/Canvas-Konvention unterscheidet. 0deg entspricht to top (die Gradient-Linie zeigt nach oben, also erscheint die letzte Farbe oben in der Box). 90deg entspricht to right. 180deg entspricht to bottom (der Default, wenn keine Richtung angegeben wird). 270deg entspricht to left. Wachsende Winkel drehen im Uhrzeigersinn von oben, das Gegenteil der mathematischen Konvention (wo 0 rechts ist und Winkel gegen den Uhrzeigersinn wachsen) und das Gegenteil von SVGs <linearGradient>. Eine nützliche Subtilität: to right und 90deg sind nur bei quadratischen Boxen äquivalent. Bei einer nicht quadratischen Box erzeugt to top right eine Gradient-Linie genau senkrecht zur Diagonale von der linken unteren Ecke (das heißt, der Gradient trifft die Ecke sauber) während 45deg immer buchstäblich 45 Grad ist, unabhängig vom Seitenverhältnis. Das spielt für gekachelte Muster (wo Kacheln meist quadratisch sind) eine geringere Rolle, aber eine große für Hero-Hintergründe.

radial-gradient: Formen, Größen und Tupfen

Die Grammatik ist radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Die zwei Shape-Werte sind circle und ellipse (Default ellipse). Die Größe kann eines von vier Extent-Keywords sein (closest-side, closest-corner, farthest-side oder farthest-corner (der Default)) oder explizite Längen/Prozentsätze. Für Tupfenmuster ist das kanonische Rezept radial-gradient(circle at center, #000 0 5px, transparent 5px) mit background-size: 20px 20px: ein 5-px-schwarzer Kreis in der Mitte jeder 20-px-Kachel, der Rest transparent. Die Punkte können mit einer zweiten Schicht um eine halbe Kachel versetzt werden, um ein hexagonales Punktraster zu erzeugen. Für reine Streifen muss man die Kachel nicht manuell dimensionieren: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) erzeugt schwarz-weiße diagonale Streifen 10 px breit, die sich über die ganze Box wiederholen, ohne dass eine background-size-Deklaration nötig ist. Wiederholende Gradienten haben auch radiale und konische Gegenstücke, repeating-radial-gradient macht konzentrische Ringe, repeating-conic-gradient macht Windräder.

conic-gradient: Tortendiagramme und Sonnenstrahlen, die du vorher nicht bauen konntest

conic-gradient() dreht Farbstopps um ein Zentrum statt entlang einer Linie oder von einem Zentrum weg. Farbstopps werden in Winkeln positioniert, nicht in Längen. Die Ideengeschichte ist eine der interessanteren CSS-Geschichten: Lea Verou entwarf einen conical-gradient()-Vorschlag schon 2011, lange bevor irgendein Browser ihn unterstützte, und Tab Atkins Jr. würdigte ihren Entwurf, als er die Funktion formal zu CSS Image Values Level 4 hinzufügte. Die Implementierung verzögerte sich jahrelang. Im Juni 2015 schrieb Verou einen Polyfill (mit SVG und ihrer -prefix-free Bibliothek) und veröffentlichte ihn auf der Bühne der CSSConf, betitelt mit „Conical gradients, today!“ Native Auslieferung kam in Chrome 69 (4. September 2018), Safari 12.1 (25. März 2019) und Firefox 83 (17. November 2020). Was konische Gradienten freischalten, was linear und radial nicht können: Tortendiagramme und Donut-Charts ohne Canvas, SVG oder JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) plus border-radius: 50% ist ein vollständiges Tortendiagramm); Farbräder (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) erzeugt das standardmäßige Hue-Rad); Sonnen- und Sternstrahl-Muster aus alternierenden Hard-Stop-Farben in kleinen Winkelintervallen; Gradient-Rahmen und schräge Eckhighlights; und Schachbretter in einer Deklaration (repeating-conic-gradient(#000 0 25%, #fff 0 50%) plus background-size erzeugt ein Schachbrett mit einer einzigen Gradient-Schicht statt zwei gestapelten linearen Gradienten).

Performance: Wann CSS-Muster Bilder schlagen, und wann nicht

Das Performance-Argument für reine CSS-Muster ist das, das man am meisten richtig hinkriegen sollte, weil es im Marketing-Text übermäßig vereinfacht wird. Gewinne von reinem CSS: keine HTTP-Anfrage, kein Decode, kein PNG/JPEG/WebP-Overhead (eine 4-zeilige CSS-Regel ersetzt eine Binärdatei; vektor-auflösungsunabhängig) ein Muster sieht bei 1×, 2×, 3× Device Pixel Ratio identisch aus, ohne dass @2x- und @3x-Assets geliefert werden müssen, was der größte einzelne Grund ist, warum Design Systems für Retina-Displays Gradient-Muster PNGs vorziehen; trivial umfärbbar, eine CSS-Variable zu ändern aktualisiert das ganze Muster; animierbar via background-position oder, mit @property, via animierbaren Farbstopps. Kosten, die man kennen sollte: Paint-Kosten skalieren mit berührten Pixeln und Gradient-Komplexität, Gradienten gehören zu den teureren Paint-Operationen neben großen Box-Shadows, komplexen SVGs und schweren Texteffekten, und viele Gradient-Schichten über einem Vollbild-Hero zu stapeln kann auf Low-End-GPUs Frames kosten. Das Animieren der Gradient-Farben löst pro Frame vollständige Repaints aus (das ändert sich mit über @property registrierten Custom Properties in Chromium und Firefox, aber es ist immer noch sicherer, stattdessen background-position zu animieren). Die praktische Heuristik: wenn du ein einziges Vollbild-Muster hast und es nicht animierst, wirst du nichts merken. Wenn du fünf Gradient-Schichten auf jeder Karte einer langen Liste stapelst, profile es.

Barrierefreiheit: Kontrast, Dekoration und reduzierte Bewegung

CSS-Hintergrundmuster sind per Definition dekorativ. Sie erscheinen weder im Dokumentbaum noch im Accessibility-Tree; aus Sicht assistiver Technologie existieren sie schlicht nicht. Das ist großteils ein Feature, das WAI-Tutorial des W3C zu dekorativen Bildern sagt explizit, dass dekorative Bildlichkeit „mit CSS-Hintergrundbildern statt“ <img> bereitgestellt werden „sollte“, damit sie von Screenreadern natürlich ignoriert wird. Aber Kontrast gilt weiterhin für alles, was man auf das Muster legt. WCAG 2.1 Erfolgskriterium 1.4.3 verlangt ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Muster machen das schwerer, weil die lokale Luminanz des Hintergrunds Pixel für Pixel variiert. WCAG-Technik G18 adressiert das direkt: ist der Hintergrund gemustert, kann der Hintergrund um die Buchstaben so gewählt oder schattiert werden, dass die Buchstaben ein Kontrastverhältnis von 4,5:1 zum Hintergrund hinter ihnen behalten, auch wenn sie dieses Verhältnis nicht zum gesamten Hintergrund haben. In der Praxis: legt man Text auf ein Muster, wähle entweder Musterfarben mit ähnlicher Luminanz zueinander oder platziere eine einfarbige Karte zwischen Text und Muster. WCAG 2.1 verlangt auch 3:1-Kontrast für nicht-textuelle UI-Komponenten und Grafiken, was sich auf musterbasierte Icons und Trenner anwenden lässt. Ist dein Muster animiert (ein scrollender Streifen, ein langsam rotierender Konic, ein Shimmer-Skelett) umschließe die Animation in @media (prefers-reduced-motion: no-preference). Die Motivation ist medizinisch, nicht stilistisch: Animationen können vestibuläre Symptome (Übelkeit, Schwindel), Anfälle bei Nutzern mit photosensitiver Epilepsie und Migräne auslösen.

SVG-Muster vs CSS-Gradienten: Ein fairer Vergleich

Das SVG-<pattern>-Element ist der geistige Bruder der CSS-Gradienten. Beide lassen einen eine Einheitenzelle über einen Füllbereich kacheln. Sie haben unterschiedliche Sweet Spots. SVG-Muster gewinnen, wenn die Einheit eine komplexe Form ist (ein Blatt, eine Fischschuppe, ein unregelmäßiges Hexagon), die Gradienten nicht natürlich ausdrücken können; wenn du ein vom Designer erstelltes Asset ausliefern willst (Hero Patterns von Steve Schoger, gestartet am 27. September 2016 unter CC BY 4.0, ist die kanonische SVG-Mustergalerie); wenn du präzise Vektorgeometrie für scharfe Kurven brauchst, die Gradient-Hard-Stops nur annähern können; oder wenn du das Muster über mehrere SVG-Elemente per fill="url(#myPattern)" wiederverwenden willst. CSS-Gradienten gewinnen, wenn das Muster geometrisch ist, Streifen, Punkte, Raster, Schachbretter, Chevrons, Dreiecke, alles, was sich aus geraden Linien und Kreisen zusammensetzen lässt; wenn du null HTTP-Overhead willst; wenn du pro-Instanz-Anpassung über CSS-Variablen brauchst (--stripe-color: red aktualisiert das Muster sofort); wenn du das Muster als CSS-Hintergrund auf jedes HTML-Element anwenden willst, nicht nur innerhalb eines SVG; oder wenn du das Muster ohne <animate>-Elemente animieren willst. Eine gängige hybride Technik ist, ein SVG als data:image/svg+xml,...-URL innerhalb von background-image zu inlinen, das bringt den No-Extra-HTTP-Request-Vorteil von reinem CSS, während Designer beliebige Formen ausdrücken können. Der Nachteil ist Encoding-Fummelei: # wird zu %23, doppelte Anführungszeichen müssen geescaped werden, und das SVG in DevTools zu inspizieren ist umständlich. Dieser Generator emittiert reine CSS-Gradient-Muster; der Trade-off ist gewollt, Einfachheit und kleine Payload statt maximale Form-Flexibilität.

Wo CSS-Muster ihren Wert beweisen

Das Genre ist breiter als Tapete. Echte Produktionsanwendungen umfassen:

• Hero-Sektion-Hintergründe. Subtile großmaßstäbliche Muster hinter dem Seitentitel (diagonale Linien, große Punkte, ein weicher conic-gradient-Sonnenstrahl) geben einem Hero visuelle Textur, ohne Bildgewicht hinzuzufügen.
• Empty-State-Platzhalter. Wenn eine Liste keine Einträge hat, kommuniziert ein Schachbrett- oder Rastermuster im leeren Bereich „das ist absichtlich leer“ besser als flacher Weißraum.
• Lade-Skelette. Das klassische „Shimmer“-Skelett ist ein linear-gradient mit halbtransparentem Weiß, das sich über einem grauen Hintergrund bewegt, animiert via background-position. Die Technik ist mittlerweile UX-Standard.
• Karten- und Badge-Hintergründe. Ein schwaches Punktraster hinter einem „Pro“-Badge oder ein diagonaler Pinstripe hinter einer Feature-Karte fügt Textur hinzu, ohne mit dem Text zu konkurrieren.
• Fehler- und Warnzustände. Wiederholende diagonale Streifen (das Verkehrshütchen-Muster) signalisieren intuitiv „Warnzone“. repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) ist das universelle „Achtung“-Overlay.
• Retro- und Synthwave-Ästhetiken. Das Tron-Raster der 80er (ein in Perspektive verzogenes magenta Raster, das auf einen Horizont zurollt) ist ein Effekt in reinem CSS, gebaut aus einem repeating-linear-gradient plus transform: perspective(...) rotateX(...).
• Sektionstrenner. Ein kurzer, vollbreiter Streifen Muster zwischen Sektionen bricht eine lange Seite auf, ohne semantisches Gewicht hinzuzufügen.
• Druckfreundliche Perforationen. Punktierte/gestrichelte Perforationslinien für druckbare Tickets und Coupons sind mit repeating-linear-gradient einfacher zu schreiben als mit SVG.
• Light-/Dark-Mode-Muster. Muster tauschen sich gut zwischen Light- und Dark-Mode aus, weil sie von CSS-Variablen getrieben werden; eine Deklaration passt sich beiden Paletten an.

So funktioniert es

1. Mustertyp wählen: Wählen Sie aus Streifen, Punkten, Schachbrett, Raster, Zickzack, Dreiecken und weiteren reinen CSS-Mustern.
2. Farben und Skalierung anpassen: Passen Sie Vordergrund-/Hintergrundfarben, Mustergröße, Winkel und Abstand mit Reglern an.
3. Live-Vorschau: Das Muster wird in Echtzeit dargestellt, während Sie Einstellungen ändern.
4. CSS kopieren: Kopieren Sie die generierte background-Eigenschaft und fügen Sie sie in Ihr Stylesheet ein.

Häufig gestellte Fragen

Wird das CSS in älteren Browsern funktionieren?

Jeder größere moderne Browser liefert linear-gradient, radial-gradient und die wiederholenden Varianten unprefixed und standardmäßig aktiviert, das Aufräumen war Ende 2013 abgeschlossen. conic-gradient brauchte länger (Chrome 69 im September 2018, Safari 12.1 im März 2019, Firefox 83 im November 2020), ist 2026 aber ebenfalls universell. Der Generator emittiert keine Vendor-Präfixe, weil keine für irgendeinen unterstützenswerten Browser nötig sind. Microsoft Edge ließ seine EdgeHTML-Engine im Januar 2020 fallen und IE11 erreichte sein Lebensende am 15. Juni 2022; beide sind nun historische Fußnoten für jedes neue Tool.

Sind CSS-Muster schneller als gekachelte Bildhintergründe?

Für statische Muster ja, ein CSS-Muster eliminiert eine HTTP-Anfrage, einen Decode-Durchgang und das Ausliefern von Multi-Resolution-Assets, das für Retina-Displays nötig ist. Das Muster ist außerdem bei jedem Zoom vektorperfekt und trivial über CSS-Variablen umfärbbar. Der Trade-off ist Paint-Cost: Gradienten gehören zu den teureren Dingen, die ein Browser malen kann, und viele Gradient-Schichten über einem Vollbild-Hero zu stapeln kann auf Low-End-GPUs Frames kosten. Für ein einzelnes statisches Muster auf einer Karte oder einer Sektion wirst du nichts merken. Wenn du fünf Gradient-Schichten auf jedem Eintrag einer langen Liste stapelst, profile vor dem Ausliefern.

Wie lege ich Text barrierefrei auf ein Muster?

WCAG 2.1 SC 1.4.3 verlangt 4,5:1-Kontrast für normalen Text und 3:1 für großen Text gegenüber dem Hintergrund. Bei einem gemusterten Hintergrund variiert die lokale Luminanz Pixel für Pixel, was den Worst-Case-Kontrast scheitern lassen kann, auch wenn der Durchschnittskontrast in Ordnung aussieht. Zwei sichere Strategien: Musterfarben mit ähnlicher Luminanz zueinander wählen (damit der Kontrast zu deinem Text über die ganze Kachel hinweg konsistent ist), oder eine einfarbige Karte zwischen Text und Muster platzieren. Text direkt auf ein hochkontrastiges Muster zu legen (z. B. schwarz-weiße Streifen) ist der Fall, in dem Kontrast-Checker und menschliche Leser beide ringen.

Kann ich das Muster animieren?

Ja. Die billigste Animation ist, background-position mit @keyframes zu verschieben, das löst auf den meisten Browsern ein nur-Compositor-Update aus und kann mit 60 fps flüssig laufen. Die Farben des Gradienten selbst zu animieren ist teurer, weil jeder Frame einen vollen Paint auslöst; modernes Chromium und Firefox können das mit über @property registrierten Custom Properties mildern, aber background-position ist die sicherere Default. Umschließe die Animation immer in @media (prefers-reduced-motion: no-preference): animierte Hintergründe können bei sensiblen Nutzern vestibuläre Symptome, Anfälle und Migräne auslösen.

Warum sieht mein Muster auf Retina-Displays unscharf aus?

Es sollte nicht, das ist gerade der Punkt, Gradienten statt Bitmap-Bildern zu verwenden. Falls deins doch, prüfe, dass die Farbstopps auf scharfen Prozentsätzen liegen (ein Hard-Stop sind zwei Stopps an derselben Position; eine kleine Lücke wie 50% 50.1% führt ein sichtbares Unschärfeband ein) und dass die Kachel-Größe in px statt in em oder % ist, was unvorhersehbar mit Textskalierung interagieren kann. Konische Gradienten in älteren Safari-Versionen renderten das Zentrum als leicht unscharfen Bereich; modernes Safari und Chrome rastern beide auf der GPU und das Problem ist weitgehend weg.

Werden meine Daten irgendwohin gesendet?

Nein. Musterauswahl, Farbwahl, Dimensionierung und CSS-Generierung laufen alle in deinem Browser. Wenn du die Steuerelemente benutzt, gibt es keine ausgehenden Anfragen, du kannst es im Network-Tab der DevTools überprüfen. Das generierte CSS gehört dir, du kannst es irgendwo einfügen.

Verwandte Tools