CSS-Gradient-Generator

Lineare, radiale und konische CSS-Verläufe auf einer visuellen Leiste bauen und den Code als CSS, Tailwind oder SVG kopieren — direkt im Browser.

Über CSS-Gradient-Generator

Was es ist

Mit diesem Tool gestaltest du einen Verlauf, indem du Farbstopps auf einer Leiste ziehst, statt die Syntax von Hand zu schreiben. Wähle einen linearen, radialen oder konischen Verlauf, leg Winkel, Form und Position fest, gib jedem Stopp Farbe und Deckkraft und wähle den Farbraum für weichere Übergänge. Das Ergebnis kannst du als CSS, Tailwind-Klasse oder SVG kopieren.

Hauptfunktionen

  • Lineare, radiale und konische Verläufe, auch wiederholend.
  • Farbstopps, die du auf einer interaktiven Leiste hinzufügst, ziehst und entfernst, jeder mit eigener Deckkraft.
  • Winkel, Form und Mittelpunkt.
  • Interpolation in sRGB, HSL, OKLab oder OKLCH.
  • Code als CSS, Tailwind oder SVG; ein zufälliger Verlauf als Anregung.

So funktioniert es

  1. Wähle den Verlaufstyp oder klick auf die Schaltfläche für einen zufälligen Verlauf, um mit einer Idee zu starten.
  2. Klick auf die Leiste, um Stopps hinzuzufügen, zieh sie und leg Farbe und Deckkraft fest.
  3. Pass Winkel, Form oder Position an und, wenn du willst, den Farbraum.
  4. Kopiere den Code im gewünschten Format.

Wann es hilft

  • Einen Hintergrund- oder Button-Verlauf für eine Website erstellen.
  • Einen weichen Verlauf ohne die graue Mitte bekommen, die einfaches sRGB-Mischen erzeugt.
  • Einen Verlauf als SVG für eine Illustration oder ein Icon verwenden.

Datenschutz und Grenzen

Deine Daten

Der Verlauf wird im Browser erstellt, und nichts wird an einen Server gesendet — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“.

Grenzen

  • SVG kennt keine konischen Verläufe: Ein konischer wird als linearer Verlauf nach SVG exportiert.
  • SVG mischt Farben immer in sRGB, ein OKLab- oder OKLCH-Verlauf sieht dort also etwas anders aus.

Häufige Fragen

Welchen Farbraum soll ich wählen?

OKLCH oder OKLab ergeben gleichmäßige, kräftige Übergänge — etwa von Blau nach Gelb ohne stumpfe graue Mitte. sRGB entspricht dem, was ältere Tools erzeugen.

Warum sieht das SVG anders aus als das CSS?

SVG hat keine konischen Verläufe und mischt Farben nur in sRGB. Das Tool weist darauf hin, wenn einer dieser Unterschiede greift.

Unterstützen alle Browser OKLCH-Verläufe?

Alle aktuellen Browser schon. Für sehr alte wähle sRGB, das überall funktioniert.