Zum Inhalt springen
arnaud.app

Wiederholender Gradient-Generator (Streifen & Muster)

Kostenloser repeating-linear-gradient-Generator mit Live-Vorschau. CSS-Streifen, Balken und Barbier-Muster aus eng gesetzten Stopps - CSS kopieren, ohne Anmeldung.

Läuft in deinem Browser

Ein wiederholender Gradient kachelt seine Farbstopps immer wieder, statt sie über das Element zu strecken. Setze die Stopps eng, stell den Winkel ein, und du bekommst scharfe CSS-Streifen, Balken, Karos oder ein Barbier-Muster - alles live als `repeating-linear-gradient()`. Kein Bild, keine zusätzliche HTTP-Anfrage.

background: repeating-linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);

So funktioniert's

  1. Typ oder Voreinstellung wählen

    Linear, radial oder konisch (oder eine wiederholende Variante), oder lade eine Voreinstellung für einen fertigen Look.

  2. Gradient formen

    Winkel ziehen, radiale Form und Position einstellen, Farbstopps auf der Leiste bearbeiten - klicken zum Hinzufügen, Griff ziehen zum Verschieben.

  3. Farbe feinjustieren

    Die Deckkraft jedes Stopps anpassen und OKLCH für weichere, lebhaftere Verläufe zwischen gesättigten Farben einschalten.

  4. Kopieren oder teilen

    Das fertige `background`-CSS kopieren oder mit Link kopieren den exakten Gradienten teilen.

Was ist das?

Ein CSS-Gradient ist ein weicher, auflösungsunabhängiger Verlauf zwischen zwei oder mehr Farben, vom Browser ohne Bilddatei gezeichnet. Dieser Generator baut die vollständige Funktion `linear-gradient()`, `radial-gradient()` oder `conic-gradient()` (samt wiederholenden Varianten) aus einer Liste von Farbstopps - jeder mit Farbe, Position und Deckkraft. Als reines CSS skaliert ein Gradient auf jede Grösse, kostet kaum Rechenzeit und pixelt nie.

Wann verwenden

Greif zum Gradienten, wenn du Tiefe ohne das Gewicht eines Bildes willst: Hero- und Sektions-Hintergründe, Button- und Karten-Highlights, glasige Overlays, Markenakzente, Dunkelmodus-Flächen oder ein Verlauf von einem Foto in die Seitenfarbe. Konische Gradienten dienen als leichte Tortendiagramme, Farbkreise und Spinner; wiederholende erzeugen Streifen, Raster und Muster.

Häufige Fehler

Zu viele Stopps lassen einen Gradienten überladen wirken - zwei oder drei genügen meist. Gesättigte Komplementärfarben (Rot zu Grün) in sRGB ergeben eine matschige Mitte; füge einen neutralen Punkt ein oder schalte OKLCH ein. Vergiss keinen `background-color`-Fallback für den seltenen Browser, der deine Syntax nicht versteht, und denk daran, dass sehr subtile Gradienten auf schlechten Bildschirmen verschwinden können.

FAQ

Was ist der Unterschied zwischen linearem, radialem und konischem Gradient?
Ein linearer Gradient mischt Farben entlang einer geraden Linie in einem von dir gewählten Winkel. Ein radialer Gradient strahlt von einem Mittelpunkt aus, als Kreis oder Ellipse. Ein konischer Gradient dreht die Farben um einen Punkt, wie ein Uhrzeiger - ideal für Farbkreise und Tortendiagramme. Dieses Tool erzeugt alle drei plus ihre wiederholenden Varianten.
Warum wirkt mein Gradient streifig oder matschig in der Mitte?
Standardmässig mischt CSS Farben im sRGB-Raum, was zwischen zwei gesättigten Farben eine dunkle, matschige Mitte ergeben kann. Schalte OKLCH ein und das Tool gibt `linear-gradient(in oklch, ...)` aus, das in einem perzeptuell gleichförmigen Raum mischt - für weichere, leuchtendere Übergänge in modernen Browsern.
Kann ich Transparenz hinzufügen?
Ja. Jeder Stopp hat einen Deckkraft-Regler; unter 100 % gibt das Tool ihn als `rgba()`-Farbe aus. Einen Gradienten transparent auslaufen zu lassen ist der Trick hinter Bild-Overlays, « Weiterlesen »-Verläufen und sanften Trennern.
Wie viele Farbstopps kann ich nutzen?
So viele du willst - klick die Leiste oder « Stopp hinzufügen » und zieh die Griffe zum Verschieben. Zwei oder drei Stopps wirken meist am besten; zu viele zu eng beieinander und der Gradient wirkt überladen.
Was steuert der Winkel?
Bei linearen Gradienten gibt der Winkel die Richtung des Verlaufs an: 0° nach oben, 90° nach rechts, 180° nach unten. Bei konischen legt er fest, wo die Drehung beginnt. Radiale Gradienten haben keinen Winkel - du steuerst stattdessen Form und Mittelpunkt.
Wie mache ich Streifen oder eine harte Kante statt eines weichen Verlaufs?
Gib zwei Stopps dieselbe Position (beide bei 50 %) und die Farbe wechselt hart, ohne Verlauf - ein harter Stopp. Nutze einen wiederholenden linearen Gradienten mit eng gesetzten Stopps für Streifen, Karos oder ein Barbier-Muster.
Kann ich die Ausgabe mit Tailwind oder als background-image nutzen?
Das Tool gibt einen Standard-`background:`-Wert aus. Nutze ihn direkt oder verschiebe ihn nach `background-image`, wenn du auch einen `background-color`-Fallback willst. In Tailwind als Arbitrary Value wie `bg-[linear-gradient(...)]` einsetzen.

CSS-Gradient-Generator

Lineare, radiale und konische CSS-Gradienten mit Live-Vorschau, Voreinstellungen und Ein-Klick-Kopie.

Ausprobieren →

Mehr in dieser Kategorie