Zum Tool springen
JoeLucky

Auf ★ klicken, um ein Tool zu speichern

Tool-Kategorien

Code zu BildCSS-VerlaufsgeneratorGlassmorphism-GeneratorBox-Shadow-GeneratorCSS-LadeanimationenSVG-Blob-GeneratorSVG zu PNGFarbkontrast-PrüferPX/REM/EM-Umrechner
JoeLucky

Praktische Online-Tools an einem Ort

DatenschutzerklärungNutzungsbedingungen

© 2026 JoeLucky®. Alle Rechte vorbehalten.

  1. JoeLucky
  2. /CSS & Design
  3. /CSS-Verlaufsgenerator

CSS-Verlaufsgenerator

Lineare, radiale und konische Verläufe visuell gestalten und das CSS sofort kopieren

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

Ähnliche Tools: CSS & DESIGN

Alle anzeigen
Code zu Bild

Code-Snippets in ansprechende Screenshots verwandeln, mit mehreren Farbschemata

Öffnen →
Glassmorphism-Generator

Glassmorphism-Effekt in Echtzeit ansehen und den CSS-Code mit einem Klick kopieren

Öffnen →
Box-Shadow-Generator

💬 Kommentare

?

Noch keine Kommentare. Schreiben Sie den ersten!

Was ist CSS-Verlaufsgenerator?

Der CSS-Verlaufsgenerator ermöglicht es Ihnen, lineare (Linear), radiale (Radial) und konische (Conic) Verläufe in Echtzeit zu gestalten. Passen Sie Farbstopps, Winkel und Positionen an und kopieren Sie anschließend direkt den CSS-Code.

Funktionen

  1. 3 Verlaufstypen: Linear (in Winkelrichtung), Radial (von der Mitte nach außen) und Konisch (Conic, um den Mittelpunkt rotierend – häufig für Kreisdiagramme und Farbräder).
  2. Winkelsteuerung: Für lineare und konische Verläufe lässt sich ein Winkel von 0–360° per Schieberegler oder genauer Zahleneingabe festlegen; die Drehen-Schaltfläche erhöht den Winkel pro Klick um 45°.
  3. Farbstopps: Jeder Stopp hat eine eigene Farbe (native Farbauswahl) und Position (0–100 %). Mindestens 2 Stopps bleiben erhalten, weitere lassen sich beliebig hinzufügen.
  4. 10 ausgewählte Voreinstellungen: Darunter Sunset, Ocean, Aurora und Conic Pride – per Klick laden und als Ausgangspunkt weiterbearbeiten.
  5. Große Live-Vorschau: Der 192 px hohe Vorschaubereich oben und der schmale Verlaufsbalken unten werden gleichzeitig aktualisiert, sodass Sie die tatsächliche Wirkung klar sehen.
  6. CSS mit einem Klick kopieren: Mit „CSS kopieren“ erhalten Sie CSS im Format background: linear-gradient(...); zum Einfügen in beliebige CSS-Dateien oder style-Attribute.

Anleitung

  1. Wählen Sie einen Verlaufstyp, legen Sie Farbstopps und Winkel fest oder starten Sie mit einer Voreinstellung.

Häufig gestellte Fragen

Welche Verlaufstypen werden unterstützt?

Lineare (linear-gradient), radiale (radial-gradient) und konische (conic-gradient) Verläufe.

Wie kopiere ich das erzeugte CSS?

Klicken Sie auf die Kopieren-Schaltfläche neben dem Codefeld.

Kann ich mehrere Farbstopps hinzufügen?

Ja. Ziehen Sie Farbstopp-Griffe auf dem Verlaufsregler oder fügen Sie sie hinzu bzw. entfernen Sie sie.

Schatteneffekte interaktiv anpassen und die CSS-Ausgabe in Echtzeit ansehen

Öffnen →
  • Prüfen Sie die Vorschau und fügen Sie bei Bedarf Farbstopps hinzu oder entfernen Sie welche.
  • Kopieren Sie das erzeugte CSS.