CSS-Muster-Hintergrund-Generator

Die meisten „Mustergenerator“-Tools verwenden stillschweigend dieselbe repeating-linear-gradient-Formel für jede Option und ändern nur die Zahlen. Dieses hier nicht: Jeder der sechs Mustertypen wird mit der spezifischen CSS-Technik aufgebaut, die diese Form tatsächlich erzeugt. Streifen nutzen einen einzigen repeating-linear-gradient mit zwei Farbbändern. Punkte verwenden einen radial-gradient, der allein durch background-size gekachelt wird – den klassischen CSS-Punkte-Trick – anstelle eines repeating-radial-gradient, der einen runden Punkt auf einem rechteckigen Raster nicht sauber kacheln kann. Das Schachbrett nutzt die echte Vierquadranten-conic-gradient-Formel: Ein in einer quadratischen Kachel zentrierter konischer Verlauf teilt sich auf natürliche Weise an den 90-Grad-Grenzen in vier Quadrantenquadrate, und der Wechsel zweier Farben über diese Quadranten kachelt zu einem echten Schachbrett, nicht zu einer Annäherung.

Gitter und diagonale Kreuzschraffur legen jeweils zwei repeating-linear-gradients als separate background-image-Einträge übereinander, anstatt die zweite Richtung mit Rahmen-Tricks vorzutäuschen. Das Gitter kombiniert einen repeating-gradient „nach rechts“ und einen „nach unten“ für scharfe horizontale und vertikale Linien. Die Kreuzschraffur schichtet einen +45°- und einen -45°-repeating-gradient für ein korbgeflechtartiges Diagonalmuster – hier lohnt sich Genauigkeit: Es handelt sich um eine ehrliche Kreuzschraffur, nicht um eine echte Fischgrätgeometrie, und das Tool bezeichnet es so, ohne zu übertreiben. Dreiecke verwenden dieselbe Vierkeil-conic-gradient-Technik wie das Schachbrett, starten den Verlauf jedoch um 45 Grad gedreht, was die Keilgrenzen von den Kantenmittelpunkten zu den Ecken der Kachel verschiebt und aus denselben vier Keilen vier von Ecke zu Ecke verlaufende Dreiecke statt vier Quadrantenquadrate macht.

Jeder Mustertyp zeigt nur die Einstellungen an, die tatsächlich darauf zutreffen – ein Winkelregler erscheint für Streifen, Punktradius und -abstand für Punkte, Linienstärke für Gitter und Kreuzschraffur – und die große gekachelte Vorschau wird bei jeder Änderung neu gezeichnet, sodass du mehrere vollständige Wiederholungen sehen kannst, bevor du einen Wert festlegst. Schalte den Ausgabemodus auf SVG um, und dasselbe Muster erscheint als <pattern>-Element, aufgebaut aus einfachen rect-, circle-, path- oder polygon-Primitiven, bereit zum Einfügen in die <defs> eines SVG-Dokuments, mit Ein-Klick-Download als eigenständige .svg-Datei.

Alles läuft lokal in deinem Browser: keine Bilduploads, keine Serverumwege, kein Konto. Für einfarbige Füllungen oder Verlaufsfüllungen ohne Wiederholung ist der CSS-Verlaufsgenerator auf dieser Seite das richtige Werkzeug; dieses hier ist speziell für kachelbare geometrische Hintergründe, die ganz ohne Bildressourcen auskommen.