CSS Gradient Generator – Kurzanleitung

Dieses Widget ermöglicht es dir, interaktiv CSS-Verläufe (Gradienten) zu erstellen und den entsprechenden CSS-Code dafür zu generieren. Du kannst sowohl lineare als auch radiale Verläufe erstellen und die Farben sowie deren Positionen (Stopps) anpassen.

Grundfunktionen:

1. Vorschau (Preview):

   • Der große, farbige Bereich im Widget ist die Vorschau. Hier wird der generierte Farbverlauf in Echtzeit angezeigt, während du Änderungen vornimmst.

2. Farbstopps (Color Stops):

   • Farbstopp-Handles: In der Vorschau siehst du Punkte. Diese „Handles“ repräsentieren die Farbstopps.
     • Du kannst die Farbe dieser Handles durch das Farbauswahlfeld im Handle selbst ändern.
     • Die Position der Handles (und damit die Übergangspunkte im Verlauf) kann durch ziehen geändert werden.
   • Farbstopp hinzufügen: Mit dem „+ Farb-Stopp hinzufügen“-Button kannst du weitere Farben zum Verlauf hinzufügen. Dies erzeugt neue „Handles“.
   • Farbstopps bearbeiten:
     • Um die Farbauswahl eines Farbstopps anzupassen muss in die Mitte des Stopps geklickt werden. Auf mobilen Endgeräten muss dafür doppelt getippt werden.

3. Verlaufstyp (Gradient Type):

   • Linear: Hier verläuft der Farbverlauf in einer geraden Linie.
   • Radial: Hier verläuft der Farbverlauf von einem Mittelpunkt aus in alle Richtungen.
   • Auswahl: Mit dem Dropdown-Menü „Typ“ wählst du den gewünschten Verlaufstyp.

4. Lineare Verlaufseinstellungen (Linear Controls):

   • Winkel: Der Winkel bestimmt die Richtung des linearen Verlaufs.
   • Einstellung: Du kannst den Winkel mit dem Schieberegler oder dem Zahlenfeld anpassen.
   • Werte: Der Winkel wird in Grad angegeben (0-360).

5. Radiale Verlaufseinstellungen (Radial Controls):

   • Diese Einstellungen werden nur angezeigt, wenn du den „Radial“-Verlaufstyp auswählst.
   • Form: Hier legst du die Form des radialen Verlaufs fest (Ellipse oder Kreis).
   • Größe: Hier definierst du, wie groß der radiale Verlauf sein soll (z.B. „Kleinste Seite“, „Größte Ecke“ usw.).
   • Position: Hier legst du den Mittelpunkt des radialen Verlaufs fest (z.B. „Zentrum“, „Oben Rechts“ usw.).

6. CSS-Code:

   • Anzeige: Der generierte CSS-Code wird im Textfeld „CSS Code“ angezeigt.
   • Kopieren: Mit dem „Code kopieren“-Button kannst du den Code in die Zwischenablage kopieren.

Kurz gesagt:

1. Wähle den Verlaufstyp (Linear oder Radial).
2. Passe die Einstellungen für den gewählten Typ an (z.B. Winkel, Form, Größe, Position).
3. Füge Farbstopps hinzu und verändere die Farben und Positionen der Handles.
4. Betrachte die Vorschau und den CSS Code.
5. Kopiere den Code und verwende ihn in deinem Projekt.