Wiederholender Verlaufsgenerator
Erstellen Sie CSS-Muster mit repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient() - sofort und kostenlos. Wählen Sie aus 6 integrierten Musterstilen (Streifen, Zickzack, Schachbrett, Punkte, Rauten oder Benutzerdefiniert), wählen Sie zwei Farben, passen Sie Mustergröße und Kachelversatz an und erhalten Sie produktionsfertiges CSS mit einem Klick. Vollständig privat, keine Anmeldung erforderlich.
Pattern Style
Color 1
#6366f1
Color 2
#6366f1
Gradient Type
Pattern Size
Spacing & Offset
Tile Preview (3× tiles)
background: repeating-linear-gradient(to right, #6366f1 0%, #6366f1 40%, #ec4899 40%, #ec4899 100%);
Warum unseren Generator für wiederholende Verläufe verwenden?
- 6 integrierte Musterstile: wählen Sie aus Streifen, Zickzack, Schachbrett, Punkte, Rauten oder benutzerdefinierten Mustern. Jeder Stil konfiguriert automatisch die idealen Farbstopp-Positionen und den Verlaufstyp - oder wechseln Sie in den Benutzerdefiniert-Modus für volle manuelle Kontrolle.
- Live-Kachelvorschau und sofortiges CSS: der Generator für wiederholende Verläufe aktualisiert die Live-Vorschau und die CSS-Ausgabe bei jeder Änderung. Sehen Sie genau, wie sich Ihr Muster über die Vorschaufläche wiederholt, und kopieren Sie produktionsfertiges CSS mit einem Klick.
- 100 % privat - kein Upload: die gesamte Verlaufserzeugung erfolgt lokal in Ihrem Browser. Ihre Farben und Muster verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet. Sicher für Kundenprojekte und proprietäre Designsysteme.
- Kostenlos und ohne Limits: erstellen Sie unbegrenzt viele wiederholende Verläufe ohne Anmeldung, Abo oder Nutzungsobergrenzen. Der Generator für wiederholende Verläufe ist für immer völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.
Typische Anwendungsfälle für wiederholende Verläufe
- Hintergrundmuster für Websites: Webdesigner nutzen den Generator für wiederholende Verläufe, um nahtlose Hintergrundmuster für Hero-Bereiche, Inhaltsblöcke und Seitentrenner zu erstellen. Wiederholende Verläufe laden schneller als Bilddateien und skalieren perfekt in jeder Auflösung.
- Gestreifte Tabellen und Listen in CSS: Frontend-Entwickler nutzen repeating-linear-gradient, um zebragestreifte Tabellenzeilen, alternierende Listenhintergründe und Zeitleistenmuster zu erstellen. Kopieren Sie das CSS mit einem Klick direkt in Ihr Stylesheet.
- Designsystem-Muster-Tokens: Designsystem-Teams nutzen den Generator für wiederholende Verläufe, um Muster-Tokens für dekorative Hintergründe, Ladezustände und Platzhalterelemente zu definieren. Der visuelle Builder erleichtert die Abstimmung der Muster auf Markenfarben.
- Social-Media- und Marketing-Grafiken: Marketers und Content-Ersteller nutzen den Generator für wiederholende Verläufe, um markante Musterhintergründe für Social-Media-Posts, Infografiken und E-Mail-Header zu erstellen. Die Vorlagenbibliothek bietet sofortige Startpunkte.
- Dekorative UI-Elemente: UI-Entwickler nutzen wiederholende Verläufe für Fortschrittsbalken, Lade-Spinner, dekorative Ränder und Hintergrundtexturen. Radiale und konische wiederholende Verläufe verleihen UI-Komponenten einzigartige visuelle Effekte.
- Landingpage- und CTA-Design: Conversion-Optimierer nutzen den Generator für wiederholende Verläufe, um aufmerksamkeitsstarke CTA-Hintergründe und Abschnittstrenner zu erstellen, die Seiten hervorheben und gleichzeitig schnelle Ladezeiten ohne Bildanfragen beibehalten.
Was ist ein wiederholender CSS-Verlauf?
Ein wiederholender CSS-Verlauf ist ein Verlauf, der sein Muster mithilfe der Funktionen repeating-linear-gradient(), repeating-radial-gradient() oder repeating-conic-gradient() über das Element kachelt oder wiederholt. Anders als normale Verläufe, die sich über das gesamte Element erstrecken, erzeugen wiederholende Verläufe Muster, indem sie die Farbstopp-Sequenz wiederholen. Unser Generator für wiederholende Verläufe erstellt nahtlose wiederholende Muster visuell und gibt produktionsfertiges CSS aus.
Wie unser Generator für wiederholende Verläufe funktioniert
- Musterstil wählen: Wählen Sie aus 6 integrierten Musterstilen (Streifen, Zickzack, Schachbrett, Punkte, Rauten oder Benutzerdefiniert) oder starten Sie von Grund auf mit dem Benutzerdefiniert-Modus für volle Kontrolle über jeden Farbstopp.
- Farben und Mustergröße konfigurieren: Wählen Sie zwei Farben mit den Farbwählern, passen Sie die Mustergröße (Wiederholungslänge) an und stellen Sie Abstand und Kachelversatz ein. Die Live-Vorschau aktualisiert sich sofort - kein Knopf nötig.
- CSS kopieren: Klicken Sie auf „CSS kopieren“, um die produktionsfertige background:-Deklaration in die Zwischenablage zu kopieren. Fügen Sie sie direkt in Ihr Stylesheet ein.
Wiederholende vs. nicht wiederholende Verläufe
- Normale Verläufe erstrecken sich von einem Rand des Elements zum anderen. Die Farbstopps definieren den gesamten Übergang, und der Verlauf füllt das Element genau einmal, unabhängig von der Elementgröße.
- Wiederholende Verläufe kacheln das Farbstopp-Muster über das Element. Die Mustergröße wird durch die Positionen Ihrer Farbstopps bestimmt - die letzte Stopp-Position legt die Musterlänge fest. Wiederholende Verläufe sind ideal für gestreifte Hintergründe, Schachbrettmuster und nahtlose Texturen ohne Bilddateien.
- Leistung: wiederholende CSS-Verläufe werden vom Browser gerendert und benötigen keine Netzwerkanfragen, wodurch sie deutlich schneller sind als bildbasierte Muster. Sie skalieren unendlich ohne Verpixelung und funktionieren in jeder Auflösung.
Mustergröße, Abstand und Kachelversatz
Der Schieberegler für die Mustergröße steuert die Länge eines vollständigen Musterzyklus als Prozentsatz des Containers. Ein kleinerer Wert erzeugt mehr Wiederholungen. Die Option Abstand fügt Abstände zwischen den Musterkacheln für ein deutlicheres gekacheltes Aussehen ein. Der Kachelversatz verschiebt nachfolgende Kacheln horizontal oder vertikal und erzeugt versetzte Effekte wie Ziegelwände oder versetzte Schachbretter. Diese Steuerelemente geben Ihnen volle Freiheit, das wiederholende Muster an Ihre genauen Designanforderungen anzupassen.
Häufig gestellte Fragen
Ein wiederholender CSS-Verlauf ist ein Verlauf, der sein Farbstopp-Muster mithilfe der Funktionen repeating-linear-gradient(), repeating-radial-gradient() oder repeating-conic-gradient() über ein Element kachelt. Anders als normale Verläufe, die sich einmal über das gesamte Element erstrecken, erzeugen wiederholende Verläufe nahtlose Muster - ähnlich einer Tapete oder einer Fliese. Sie werden vollständig in CSS definiert, benötigen keine Bilddateien und skalieren unendlich ohne Verpixelung.
Ein normaler, nicht wiederholender Verlauf erstreckt seine Farbstopps über das gesamte Element von Rand zu Rand. Ein wiederholender Verlauf kachelt das durch die Farbstopps definierte Muster. Der entscheidende Unterschied ist, dass wiederholende Verläufe die Positionen Ihrer Farbstopps verwenden, um die Mustergröße zu bestimmen - die letzte Stopp-Position definiert, wie groß eine Kachel ist. Alles darüber hinaus wird vom Anfang an wiederholt. Das macht wiederholende Verläufe perfekt für Streifen, Schachbretter und andere gekachelte Muster.
Der Generator für wiederholende Verläufe bietet 6 Musterstile: Streifen (durchgehende alternierende Streifen in beliebiger Richtung), Zickzack (Wellenmuster im Zickzack), Schachbrett (alternierende Quadrate), Punkte (wiederholende radiale Punkte), Rauten (Rautenmuster) und Benutzerdefiniert (vollständige manuelle Kontrolle über alle Farbstopps und Verlaufstypen). Jeder Stil konfiguriert automatisch die optimalen Farbstopp-Positionen und den Verlaufstyp, aber Sie können jederzeit zu Benutzerdefiniert wechseln.
Der Schieberegler für die Mustergröße steuert, wie groß eine vollständige Musterkachel relativ zum Container ist. Ein kleinerer Prozentsatz erzeugt mehr Wiederholungen auf derselben Fläche (feineres Muster), ein größerer Prozentsatz erzeugt weniger, größere Wiederholungen (gröberes Muster). Bei 25 % sehen Sie beispielsweise 4 Wiederholungen im Container, bei 50 % 2 Wiederholungen und bei 100 % genau 1 vollständigen Musterzyklus.
Ja. Die gesamte Verlaufserzeugung erfolgt zu 100 % clientseitig in Ihrem Browser mit JavaScript. Ihre Farbauswahl und Musterkonfigurationen werden niemals an einen Server gesendet, niemals gespeichert und niemals übertragen. Der Generator für wiederholende Verläufe ist vollständig privat und sicher für Kundenprojekte.
Ja. Kopieren Sie den Verlaufswert (den Teil innerhalb der background:-Deklaration, ohne „background:“) und verwenden Sie ihn in einer Tailwind-Klasse für beliebige Werte: bg-[repeating-linear-gradient(to_right,#6366f1_0,#6366f1_40px,#ec4899_40px,#ec4899_80px)]. Ersetzen Sie Leerzeichen durch Unterstriche in Tailwind-Werten für beliebige Werte. Alternativ können Sie den Verlauf in Ihrer tailwind.config.js unter theme.extend.backgroundImage hinzufügen, um ihn projektweit wiederzuverwenden.
Wiederholende lineare und radiale Verläufe werden in allen modernen Browsern ohne Herstellerpräfixe unterstützt. Wiederholende konische Verläufe werden in Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ unterstützt. Für ältere Browser (IE11 und älter) sollten Sie eine Volltonfarbe als Fallback vor der Verlaufsdeklaration angeben.
Ja. Der Generator für wiederholende Verläufe ist 100 % kostenlos, ohne Anmeldung, ohne Premium-Funktionen und ohne Nutzungslimits. Erstellen Sie unbegrenzt viele wiederholende Verläufe ohne Einschränkungen oder versteckte Kosten.