CSS-Streifenmuster-Generator
Streifenhintergründe über Winkel, Farben und Breite gestalten und den CSS-Code kopieren
Mit repeating-linear-gradient erstellen Sie hier in Echtzeit die unterschiedlichsten Streifenhintergründe – von diagonalen Mustern über Nadelstreifen bis hin zu Warnstreifen. Webdesignerinnen und Entwickler bekommen so im Handumdrehen fertigen CSS-Code für Banner, Sektionshintergründe oder dekorative Elemente. Alle Berechnungen laufen ausschließlich im Browser, es wird nichts an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Klicken Sie auf eine der fertigen Vorlagen (Diagonal, Nadelstreifen, Warnstreifen, Zuckerstange, Pastell und mehr), um loszulegen
- Verfeinern Sie das Muster über den Winkelregler und die beiden Regler für die Streifenbreite
- Legen Sie die beiden Farben per Farbwähler oder direkter HEX-Eingabe fest
- Prüfen Sie die Vorschau, kopieren Sie den erzeugten CSS-Code und fügen Sie ihn in Ihr Projekt ein
FAQ
- Für welche Eigenschaft ist der erzeugte CSS-Code gedacht?
- Fügen Sie ihn unverändert als Wert der Eigenschaft background-image ein. Der Musterhintergrund entsteht allein durch CSS – eine separate Bilddatei ist nicht nötig.
- Kann ich das Muster als Bilddatei speichern?
- Das Tool erzeugt ausschließlich CSS-Code. Es ist also die richtige Wahl, wenn Sie den Hintergrund als Code statt als Bilddatei einbinden möchten.
- Wird das Muster in allen Browsern korrekt dargestellt?
- repeating-linear-gradient ist eine CSS-Standardfunktion, die von praktisch allen aktuellen Browsern unterstützt wird.