CSS-Gradient-Generator

Visueller CSS-Gradient-Generator für lineare, radiale und konische Farbverläufe: Farbstopps und Winkel anpassen, fertigen CSS-Code kopieren. Ideal für Hintergründe und Buttons, kostenlos im Browser.

Farbstopp
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Einbetten

Dieses Tool auf deiner Website einbetten

Powered by Patrache Studio DevTools
Zuletzt aktualisiert: 2026 · Kostenloses Online-Tool

Was ist CSS-Gradient-Generator?

Visueller CSS-Gradient-Generator für lineare, radiale und konische Farbverläufe: Farbstopps und Winkel anpassen, fertigen CSS-Code kopieren. Ideal für Hintergründe und Buttons, kostenlos im Browser.

Anleitung

  1. 1
    Typ auswählen— Wählen Sie den Farbverlaufstyp (linear, radial, konisch).
  2. 2
    Farbstopps anpassen— Passen Sie Farbe und Position jedes Farbstopps an.
  3. 3
    Vorschau— Überprüfen Sie das Ergebnis in Echtzeit in der Vorschau.
  4. 4
    CSS-Code kopieren— Kopieren Sie den CSS-Code mit der Schaltfläche 'Kopieren' in die Zwischenablage.

Verwandte Tools

Häufig gestellte Fragen

Es gibt keine Begrenzung, aber 2–6 sind üblich. Zu viele können die Leistung beeinträchtigen.

Ja. Aktivieren Sie das Kontrollkästchen 'Wiederholen', um das repeating-Präfix hinzuzufügen.

Fünf Vorlagen werden angeboten: Sunset, Ocean, Forest, Midnight und Rainbow.

Derzeit wird nur reines CSS ausgegeben. Eine Tailwind-Konvertierung ist für ein zukünftiges Update geplant.

Nein. Die gesamte Verarbeitung erfolgt im Browser.

Diese Website verwendet Cookies für eine bessere Nutzererfahrung und Werbung. Mehr erfahren

Bitte erlaube Werbung auf dieser Website

Um diese Werkzeuge zu nutzen, erlaube Werbung auf dieser Website. Werbung hält diesen Dienst kostenlos.

Öffne deinen Werbeblocker, deaktiviere ihn für diese Website und prüfe erneut.