CSS Hintergrundmuster erstellen

So funktioniert es

Schreiben Sie zwei Farben in das linke Feld: Die erste Zeile ist die Farbe der Streifen oder Punkte, die zweite die des Hintergrunds. Steht nur eine Zeile da, wird Weiß als Hintergrund angenommen. HEX, RGB und HSL werden alle erkannt. Wählen Sie danach das Muster und stellen Sie die Schrittweite ein: Der Schritt sagt, in welchem Abstand sich das Motiv wiederholt — bei 16 Pixeln liegt in einem Streifenmuster eine 16 Pixel breite Farbbahn neben einer 16 Pixel breiten Lücke, das Motiv beginnt also alle 32 Pixel von vorn. Fügen Sie das erzeugte CSS unverändert in Ihre Stildatei ein; den Klassennamen können Sie frei ändern. Die zwei Farbfelder unter der Ausgabe tragen dieselben HEX-Werte wie das CSS, damit Muster- und Hintergrundfarbe nicht verwechselt werden. Erzeugt wird keine Bilddatei, sondern ein Farbverlauf, den der Browser selbst zeichnet: scharf in jeder Auflösung und ohne zusätzliche Anfrage.

Dieses Werkzeug ist auch als css hintergrundmuster erstellen, gestreifter hintergrund css, css muster generator ohne bild, karomuster css hintergrund, repeating linear gradient streifen bekannt.

Was ist repeating-linear-gradient?

repeating-linear-gradient ist die CSS-Funktion, die den zwischen zwei Punkten festgelegten Farbübergang endlos wiederholt. Ein einfacher linear-gradient zieht seine letzte Farbe über die verbleibende Fläche, die wiederholende Variante beginnt nach dem letzten Farbstopp von vorn — deshalb lassen sich Streifen- und Diagonalmuster in einer einzigen Zeile schreiben. Soll die Kante hart statt weich sein, legt man das Ende der einen und den Anfang der nächsten Farbe auf denselben Pixel; so entsteht eine saubere Bahnkante.

Was ist background-size?

background-size bestimmt, in welche Fläche eine Hintergrundebene gezeichnet wird, und übernimmt beim Mustern die eigentliche Kachelarbeit. Ein radial-gradient allein zeichnet nur einen Punkt; erst wenn diese Zeichnung in eine Fläche von 16 mal 16 Pixeln gelegt und über die Oberfläche wiederholt wird, entsteht ein regelmäßiges Punktmuster. Bei mehreren Hintergrundebenen werden die Werte durch Komma getrennt in der Reihenfolge der Ebenen geschrieben; ist die Liste kürzer, wird sie von vorn erneut gelesen.

Was ist conic-gradient?

conic-gradient ordnet seine Farbstopps rund um einen Mittelpunkt an; es tut über den Winkel das, was linear-gradient entlang einer Linie und radial-gradient von der Mitte nach außen tut. Kreisdiagramme, Farbkreise und Schachbrettmuster lassen sich damit in einer Zeile schreiben. Dieses Werkzeug baut das Karomuster dennoch aus zwei linear-gradient-Ebenen, weil die kürzere conic-Fassung nur in neueren Browsern funktioniert und die Ausgabe überall einsetzbar bleiben soll.

Worin unterscheiden sich Farbverlaufsmuster und kachelbare PNG?

Eine kachelbare PNG-Datei ist ein kleines, fertig gezeichnetes Bild, das wiederholt über die Fläche gestempelt wird: Sie kostet den Browser einen zusätzlichen Download, wirkt auf Bildschirmen mit hoher Pixeldichte weich, und für eine andere Farbe muss die Datei neu erzeugt werden. Das Farbverlaufsmuster steht dagegen als Regel in der Stildatei und wird vom Browser sofort gezeichnet; es ist in jeder Auflösung scharf, Farbe und Schrittweite ändern sich mit einer Zeile, und es entsteht keine weitere Anfrage. Überlegen bleibt PNG nur bei unregelmäßigen, organischen Texturen wie Papierfaser oder Filmkorn.

Warum ein Farbverlauf statt einer PNG-Kachel?

Eine kachelbare PNG-Datei ist eine weitere Datei, die die Seite laden muss; auf Bildschirmen mit hoher Pixeldichte wirkt sie weich, und für eine andere Farbe muss die Grafik neu erzeugt werden. Beim gezeichneten Farbverlauf entfällt das alles: Ein Farbwechsel ist eine Zeile Änderung, und die Zeichnung bleibt in jeder Auflösung scharf.

Aufpassen muss man nur bei sehr kleinen Schrittweiten. Unter etwa 4 bis 6 Pixeln kann die Kantenglättung des Browsers ein feines Flimmern erzeugen, das beim Scrollen wie ein Wellenmuster aussieht. Bei dichten Mustern bleiben Sie sicherheitshalber bei 8 Pixeln oder darüber.

Welches Muster wofür?

Ein Hintergrundmuster darf das Lesen nicht erschweren; deshalb wird der Unterschied zwischen Muster- und Hintergrundfarbe bewusst klein gehalten.

• Streifen → Abschnittstrenner, Flächen für leere Zustände
• Diagonalstreifen → die übliche Kennzeichnung für gesperrt, Entwurf oder reserviert
• Karo → Anzeige von Transparenz, aus Bildbearbeitungsprogrammen bekannt
• Punkte → leicht strukturierter Seitenhintergrund, Kartenrückseite
• Gitter → Zeichenfläche, Grundriss und Skizzenhintergrund

Häufige Fragen

Wohin füge ich das erzeugte CSS ein?

Übernehmen Sie es unverändert in Ihre Stildatei und geben Sie die Musterklasse dem gewünschten Element. Den Klassennamen dürfen Sie ändern; solange die Deklarationen erhalten bleiben, ändert sich am Muster nichts.

Was genau ändert der Musterschritt?

Den Wiederholungsabstand des Motivs. Bei Streifen und Diagonalen ist der Schritt die Breite einer Bahn, bei Punkten und Gitter der Abstand zwischen zwei Motivmitten und beim Karomuster die Kantenlänge eines Quadrats.

Funktionieren diese Muster in älteren Browsern?

Ja. Die Ausgabe verwendet die klassische Schreibweise mit vier Farbstopps statt der neueren Kurzform mit mehreren Positionen; repeating-linear-gradient, radial-gradient und background-size werden seit Jahren von allen aktuellen Browsern unterstützt.

Kann ich das Muster als Bilddatei herunterladen?

Dieses Werkzeug erzeugt CSS, kein Bild; die heruntergeladene Datei endet auf .css. Wo CSS-Farbverläufe nicht funktionieren, etwa in HTML-Newslettern, brauchen Sie stattdessen eine kachelbare PNG-Datei.