Verlaufsgenerator

Diese drei CSS-Verlaufsarten unterscheiden sich darin, wie sich die Farbe über ein Element ausbreitet. Ein linearer Verlauf mischt Farben entlang einer geraden Linie in einem Winkel, den du von 0 bis 360 Grad festlegst — passend für Hintergründe, Buttons und Hero-Banner. Ein radialer Verlauf strahlt Farbe von einem Mittelpunkt aus als Kreis oder Ellipse aus und erzeugt einen Spotlight- oder Glow-Effekt. Ein konischer Verlauf lässt Farben wie ein Farbrad um einen Mittelpunkt kreisen, ideal für Kreisdiagramme, Ladeanimationen und Farbwähler-Oberflächen. Dieses Tool bietet zudem Mesh-Verläufe, die mehrere radiale Verläufe übereinanderlegen für den weichen, mehrdimensionalen Look, der bei modernen Landingpages verbreitet ist. Du kannst im Editor zwischen allen vier Stilen wechseln und die Vorschau sofort aktualisieren sehen, dann den passenden CSS-Code kopieren, sodass das Design, das du siehst, exakt dem entspricht, was live geht.

Ein Farb-Stopp ist eine einzelne Farbe an einer bestimmten Position entlang eines Verlaufs, und der Browser blendet weich zwischen aufeinanderfolgenden Stopps über. Jeder Stopp hat zwei zentrale Einstellungen: einen Farbwert und eine Position, meist als Prozentwert von 0 bis 100 entlang der Verlaufslinie ausgedrückt. Zwei Stopps ergeben einen einfachen Zweifarb-Übergang, während zusätzliche Stopps mehrfarbige Verläufe, Regenbögen oder markenspezifische Paletten ermöglichen. Du kannst außerdem die Deckkraft pro Stopp einstellen, um transparente Übergänge zu erzeugen, die zeigen, was hinter dem Element liegt. Aktivierst du den Schalter für harte Stopps, wird das Verlaufen komplett abgeschaltet, und benachbarte Stopps bilden klare Farbbänder — praktisch für Streifen, Flaggen und Duoton-Blöcke. In diesem Generator kannst du beliebig viele Stopps hinzufügen, jeden auf eine exakte Position ziehen und den resultierenden Code mit einem Klick kopieren.

In CSS wird die Richtung eines linearen Verlaufs über einen in Grad gemessenen Winkel gesteuert. Null Grad zeigt den Übergang nach oben, 90 Grad verläuft von links nach rechts, 180 Grad zeigt nach unten, und 270 Grad verläuft von rechts nach links — jeder Wert von 0 bis 360 lässt dich den Übergang präzise drehen. In rohem CSS kannst du auch Schlüsselwort-Richtungen wie "to right" oder "to bottom" verwenden, aber ein numerischer Winkel bietet feinere Kontrolle. In diesem Tool passt du den Winkel auf einer Live-Vorschau an und siehst den Verlauf sofort rotieren, sodass du nicht raten musst, welcher Wert zum gewünschten Look passt. Für lineare und konische Stile kannst du sogar eine Animations-Option aktivieren, die den Winkel fortlaufend dreht, um die Bewegung zu testen. Sobald es passt, kopierst du den exakten CSS-, Tailwind- oder styled-components-Code für dein Projekt.

Ja. Während CSS-Verläufe normalerweise am besten als Live-Code bleiben, damit sie in jeder Größe scharf sind und kein zusätzliches Bildgewicht verursachen, brauchst du manchmal eine flache Datei. Dieser Generator kann deinen Verlauf als PNG-, JPG- oder SVG-Bild exportieren, was nützlich ist, wenn du eine Hintergrundgrafik für ein Design-Tool, eine Präsentation, eine Social-Media-Grafik oder eine Plattform brauchst, die kein rohes CSS akzeptiert. PNG und JPG liefern ein festes Rasterbild, während SVG den Verlauf als skalierbare Vektordaten erhält, die auch auf hochauflösenden Displays scharf bleiben. Für Webprojekte ist das Kopieren des CSS-, Tailwind-, styled-components- oder CSS-Variablen-Codes jedoch leichter und flexibler, weil der Browser ihn nativ rendert. Baue deinen Verlauf auf der Vorschaufläche und wähle dann Code- oder Bildexport, je nachdem, wohin er soll.

Banding ist die sichtbare Stufenbildung, die man manchmal zwischen Farben sieht, wobei der Übergang eher wie Streifen als wie ein durchgehendes Verlaufen wirkt. Es passiert meist, wenn zwei Stopps sich stark in Farbton oder Helligkeit unterscheiden und das Display eine begrenzte Farbtiefe hat, sodass die Zwischentöne auf eine kleine Anzahl von Werten gerundet werden. Um es zu verringern, platziere deine Farb-Stopps näher beieinander im Farbton, füge einen Zwischenstopp hinzu oder wähle Farben mit kleineren Helligkeitssprüngen. Stelle sicher, dass du nicht versehentlich den Schalter für harte Stopps aktiviert hast, der das Verlaufen absichtlich entfernt und scharfe Bänder erzeugt. Subtile, kontrastarme Verläufe bänden am stärksten, sodass etwas mehr Kontrast paradoxerweise weicher wirken kann. Nutze die Live-Vorschau dieses Generators, um die Stopp-Platzierung zu testen, probiere die Button- oder Karten-Vorschau, um es im Kontext zu beurteilen, und kopiere das saubere Ergebnis, sobald der Übergang gleichmäßig wirkt.