🧰 UtlKit

CSS-Verlaufsgenerator

Erstellen Sie schöne CSS-Verläufe. Linear und radial mit Live-Vorschau.

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

Problem Melden

Sie haben einen Bug gefunden oder einen Vorschlag? Helfen Sie uns, dieses Tool zu verbessern.

📊 Datenzusammenfassung (automatisch ausgefüllt)

Werkzeug: gradient-generator · /tools/gradient-generator/

type: linear

angle: 135

stops: [object Object],[object Object]

radialShape: ellipse

Was ist dieses Tool?

Der CSS-Verlaufsgenerator erstellt lineare und radiale Verlaufshintergründe mit visueller Vorschau. Er erzeugt produktionsreifen CSS-Code für die Funktionen linear-gradient() und radial-gradient(). Unterstützt werden mehrere Farbverlaufsstufen, Winkel und Transparenz. Unverzichtbar für modernes Webdesign.

Anwendung

  1. 1

    Farben hinzufügen

    Klicken Sie, um Farbverlaufsstufen zum Verlauf hinzuzufügen.

  2. 2

    Einstellungen anpassen

    Stellen Sie Winkel, Typ (linear/radial) und Positionen ein.

  3. 3

    CSS kopieren

    Holen Sie sich den generierten CSS-Code.

Häufig gestellte Fragen

Was ist ein linearer CSS-Verlauf?

Ein linearer Verlauf überblendet zwei oder mehr Farben entlang einer geraden Linie. Syntax: background: linear-gradient(angle, color1, color2, ...). Häufige Winkel: 0° (unten nach oben), 90° (links nach rechts), 180° (oben nach unten).

Kann ich ihn in CSS verwenden?

Ja, es wird standardmäßiger CSS-Verlaufscode erzeugt.

Kann ich die Position jeder Farbverlaufsstufe einstellen?

Ja. Jede Farbverlaufsstufe verfügt über ein Positions-Feld von 0 bis 100 (Prozent). Sie können Stufen nach Bedarf hinzufügen oder entfernen, mindestens zwei Stufen sind erforderlich. Der generierte CSS-Code enthält immer die Position jeder Stufe.