Tools Blog

CSS Gradient
Generator

Erzeugen Sie schöne CSS-Verläufe — linear, radial oder konisch — und kopieren Sie den Code sofort. Live-Vorschau beim Anpassen von Farben und Winkel.

Linear · Radial · Konisch1-Klick-KopieCSS-ready

① Verlaufstyp & Winkel wählen ② Zwei Farben auswählen ③ CSS kopieren

#FF6B6B
#4ECDC4
Erzeugtes CSS
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
Linear

Übergang der Farben entlang einer geraden Linie, definiert durch einen Winkel (0–360°). 0° geht von unten nach oben, 90° von links nach rechts.

Radial

Farben strahlen von einem Mittelpunkt nach außen in elliptischer oder kreisförmiger Form aus. Ideal für Spotlight- und Glow-Effekte.

Conic

Farben rotieren um einen Mittelpunkt wie ein Farbrad. Perfekt für Tortendiagramme und eckige Designs.

Wie CSS-Verläufe funktionieren — linear, radial und konisch

CSS-Verläufe werden vollständig vom Browser ohne Bilddateien erzeugt. Ein linearer Verlauf mischt Farbstopps entlang einer Achse: linear-gradient(). Ein radialer strahlt von einem Brennpunkt: radial-gradient(). Ein konischer dreht Farben um einen Mittelpunkt: conic-gradient(). Alle drei werden über background oder background-image definiert. Stoppositionen (0%–100%) steuern, wo jede Farbe beginnt und endet.

Häufig gestellte Fragen

Ein CSS-Verlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, der vollständig vom Browser ohne Bilddateien erzeugt wird. Er ist auflösungsunabhängig und lädt sofort.
linear-gradient() mischt Farben entlang einer geraden Linie. Die Richtung wird durch einen Winkel in Grad gesteuert (0°=unten nach oben, 90°=links nach rechts). Stop-Positionen (%) definieren, wo jede Farbe beginnt und endet.
Lineare Verläufe mischen entlang einer geraden Linie. Radiale strahlen von einem Brennpunkt kreisförmig nach außen. Konische rotieren Farben um einen Mittelpunkt wie ein Farbrad.
Verläufe werden auf der Eigenschaft background oder background-image gesetzt: background: linear-gradient(90deg, #FF6B6B, #4ECDC4). Sie können mit anderen Hintergründen kombiniert werden.
Lineare und radiale Verläufe werden von allen modernen Browsern unterstützt. Konische Verläufe seit 2021. Keine Vendor-Präfixe erforderlich.
Kopieren Sie das CSS und fügen Sie es direkt in Ihr Stylesheet ein. In Figma können Sie Verläufe im Füllbereich nachbilden. Ideal für Hero-Hintergründe, Card-Overlays und dekorative Elemente.
Ja, CSS-Verläufe unterstützen unbegrenzte Farbstops. Fügen Sie mehrere Farben durch Komma getrennt hinzu: linear-gradient(90deg, red 0%, yellow 50%, blue 100%). Dieses Tool erzeugt Zwei-Stop-Verläufe zur Vereinfachung.
Verwandte Artikel
CSS 14 Min Lesezeit
CSS Gradients: Der vollständige Guide von linear bis conic
Meistern Sie alle drei CSS-Gradient-Typen — linear, radial und conic — mit fortgeschrittenen Color Stops, Winkeln, Hints und echten Mustern wie Streifenhintergründen, Gradient-Text und Mesh-Gradients.
CSS 6 Min Lesezeit
CSS Gradient Generator: Vollständiger Leitfaden für lineare und radiale Verläufe
Meistere CSS-Verläufe: linear, radial und konisch. Lerne Syntax, Farbstopps, Winkel und kreative Techniken.

Unser Netzwerk entdecken

ntool.io Kostenlose Netzwerk-Diagnosetools — Ping, Traceroute, DNS-Lookup, Port-Scanner und mehr Besuchen → capops.io Kostenlose Finanzrechner — Zinseszins, Hypothek, Altersvorsorge, Investitionstools und mehr Besuchen →