CSS-Verlauf-Generator

CSS-Verläufe visuell bauen

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

Konfiguration

0%
100%
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Baue einen CSS-Verlauf visuell – Farben, Richtung und Typ (linear oder radial) über eine visuelle Oberfläche wählen – und bekommst den exakten CSS-Code zum Kopieren in dein Projekt, statt Gradient-Syntax von Hand zu tweaken und das visuelle Ergebnis zu raten.

So verwendest du dieses Tool

  1. Verlaufstyp wählenWähle linear oder radial je nach Designbedarf.
  2. Farben und Stops setzenWähle Farbe und Position jedes Stops, um Übergänge präzise zu formen.
  3. Winkel oder Form anpassenStimme Richtung, Winkel und Ausbreitung mit Live-Vorschau ab.
  4. Erzeugtes CSS kopierenFüge die Ausgabe direkt in dein Stylesheet oder deine Design-Token-Datei ein.

Die Syntax von CSS-Farbverläufen

Ein linearer Verlauf läuft entlang einer Linie: linear-gradient(135deg, #6366f1, #ec4899) geht von oben links nach unten rechts. Ein radialer Verlauf breitet sich von einem Punkt aus: radial-gradient(circle, #fde68a, #f59e0b). Weitere Farben ergänzt du mit optionalen Stopp-Positionen wie #fff 0%, #eee 50%, #ddd 100%.

Sichtbare Streifen (Banding) entstehen eher bei großen Verläufen mit wenig Kontrast; ein zusätzlicher mittlerer Farbstopp oder eine leichte Rauschtextur glättet sie.

Warum es nutzen

  • Visuelles Bearbeiten nimmt das Raten aus der Gradient-Syntax.
  • Erzeugt schnell produktionsfertiges CSS.
  • Unterstützt Multi-Stop-Verläufe für reichere UI-Hintergründe.
  • Hilft Designern und Entwicklern, mit exakter Code-Ausgabe zusammenzuarbeiten.

Häufige Anwendungen

  • Hero-Section- oder Kartenhintergrund-Effekte erstellen.
  • Button- und CTA-Verläufe für Branding gestalten.
  • Verlaufsvarianten während UI-Iterationen testen.
  • Wiederverwendbare Verlaufs-Tokens für Design-Systeme bauen.

Tipps für bessere Ergebnisse

  • Nutze 2–4 Farbstops für sauberere Verläufe und bessere Performance.
  • Prüfe den Kontrast, wenn Text über dem Verlaufshintergrund liegt.
  • Halte den Winkel über verwandte Komponenten konsistent für visuelle Harmonie.
  • Speichere Lieblingsverläufe als Design-Tokens zur Wiederverwendung.

Fehler, die du vermeiden solltest

  • Zu viele Stops hinzufügen und matschige oder unruhige Ausgabe erzeugen.
  • Barrierefreiheit ignorieren, wenn Text auf hellen Übergängen liegt.
  • Zufällige Winkel nutzen, die mit der breiteren UI-Richtung kollidieren.
  • Vergessen, Verläufe auf minderwertigen Mobilbildschirmen zu testen.

Häufig gestellte Fragen

Ja – beide großen Verlaufstypen werden in der Regel unterstützt, sodass du den Stil bauen kannst, der zu deinem Design passt.

Ja – Multi-Stop-Verläufe mit mehreren Farben werden generell unterstützt, nicht nur eine einfache Zwei-Farben-Mischung.

Ja – die Ausgabe ist Standard-CSS, das du direkt als background- oder background-image-Wert kopieren kannst.

Streifen entstehen, wenn zwei ähnliche Farben über eine große Fläche gestreckt werden, besonders bei dunklen Tönen. Füg einen Zwischenfarbstopp hinzu, vergrößere den Farbabstand leicht oder leg eine dezente Rauschtextur darüber.

Prüf den Kontrast an beiden Enden des Verlaufs, nicht nur in der Mitte - weißer Text, der auf Dunkelblau gut lesbar ist, kann am hellen Ende scheitern. Eine dunklere Überlagerung oder ein engerer Farbbereich löst die meisten Fälle.

Browser animieren Verlaufswerte nicht direkt fließend. Der übliche Trick ist eine größere background-size mit animierter background-position oder animierte registrierte Custom Properties mit @property in Browsern, die das unterstützen.