Hintergrundmuster in CSS
Wähle das Muster und passe die zwei Farben, die Größe und die Dicke an. Der Hintergrund besteht aus CSS-Verläufen: wiegt nichts und bleibt auf jedem Bildschirm scharf.
So geht’sHintergründe mit Muster, nur mit CSS
Verfügbar auf: 
Hintergrundmuster in CSS: wofür es gut ist
Wähle aus acht Mustern, die nur mit CSS-Verläufen gemacht sind (Punkte, Punktraster, Karos, Linien, Streifen, Diagonalen, Schachbrett und Zickzack), und passe die zwei Farben, die Größe und die Dicke an. Die Miniatur jedes Musters zeigt schon deine Farben.
Der Code nutzt kein Bild: Er ist leicht und bleibt bei jeder Auflösung scharf.
So geht’s
- Wähle das Muster.
- Passe Farben, Größe und Dicke an.
- Kopiere das CSS und wende die Klasse fundo an.
Wann nutzen
- Dezente Hintergründe für Website-Bereiche.
- Kopfbereiche und Banner mit Textur.
- Hintergründe für Präsentationen und Mockups.
Häufige Fragen
Warum das Muster in CSS machen?
Weil kein Bild geladen werden muss: Der Browser zeichnet das Muster mit Verläufen. Der Code hat wenige Zeilen, verliert auf hochauflösenden Bildschirmen keine Qualität und ändert die Farbe nur durch Austausch der Werte.
Wie halte ich das Muster dezent?
Nutze zwei sehr nahe Farben (zum Beispiel Hintergrund #ffffff und Muster #eef2f7) oder gib der Musterfarbe Transparenz. Starke Muster hinter Texten stören das Lesen.
Funktioniert es in allen Browsern?
Ja. Die Muster nutzen linear-gradient, radial-gradient und repeating-linear-gradient, die alle aktuellen Browser unterstützen.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.