🌈

CSS Gradient Generator

Lineare und radiale CSS-Farbverläufe visuell erstellen. Farbstopps hinzufügen, Positionen anpassen, den Winkel festlegen und das einsatzbereite CSS mit einem Klick kopieren.

Generator-Tools Läuft lokal Keine Daten gesendet
CSS-FarbverlaufLinearer FarbverlaufRadialer FarbverlaufFarbstopps
Verlaufstyp
Winkel
Farbstopps
Vorschau
CSS-Ausgabe
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

Was ist der CSS Gradient Generator?

CSS Gradient Generator ist ein visuelles Tool zum Erstellen linearer und radialer CSS-Verläufe. Sie fügen Farbstopps hinzu, legen deren Positionen auf einer Skala von 0—00 % fest, wählen einen Winkel für lineare Verläufe und sehen das Ergebnis live. Die fertige CSS-Eigenschaft kann direkt in jedes Stylesheet eingefügt werden.

So verwenden Sie den CSS Gradient Generator

  1. Wählen Sie den Verlaufstyp Linear oder Radial.
  2. Legen Sie für lineare Verläufe den Winkel mit dem Schieberegler fest.
  3. Bearbeiten Sie die Standard-Farbstopps, indem Sie auf die Farbwähler klicken und die Positionen anpassen.
  4. Fügen Sie bei Bedarf weitere Farbstopps mit der Schaltfläche "Farbstopp hinzufügen" hinzu.
  5. Klicken Sie auf "CSS kopieren", um die Verlaufseigenschaft in die Zwischenablage zu kopieren.

Verwandte Tools

🎨
Bild Farbpalette extrahieren
Extrahieren Sie eine kompakte Palette dominanter HEX-Farben aus einem Bild
 ☀️
Bild Helligkeit Kontrast
Passen Sie Helligkeit und Kontrast des Fotos mit sofortiger Vorschau an
 🌓
Duotone Bild
Ordnen Sie Bildschatten und Glanzlichter zwei benutzerdefinierten Farben zu
CSS-Gradient-Syntax ▾
Beispiel
Eingabe Linear, 135°, Stopp 1: #7c6af7 bei 0%, Stopp 2: #06b6d4 bei 100%
Ausgabe background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Häufige Anwendungsfälle
  • Hintergrundverläufe für Landingpages und UI-Komponenten erstellen
  • Verlaufs-Overlays für Hero-Bereiche erstellen
  • Farbstopp-Muster für Diagramme oder Trennlinien erstellen
  • Verlaufsideen prototypisieren, bevor Sie sie in ein Design-Tool übertragen
Häufig gestellte Fragen
Welche Verlaufstypen werden unterstützt?

Lineare Verläufe mit benutzerdefiniertem Winkel (0—60°) und radiale Verläufe (Kreisform) werden beide unterstützt.

Kann ich mehr als zwei Farbstopps hinzufügen?

Ja. Klicken Sie auf "Farbstopp hinzufügen", um so viele Stopps hinzuzufügen, wie Sie benötigen. Jeder Stopp hat eine unabhängige Farbe und Position.

Wie steuere ich die Richtung eines linearen Verlaufs?

Verwenden Sie den Winkelregler. 0° verläuft von oben nach unten, 90° von links nach rechts und 135° diagonal.

Ist die Ausgabe browserübergreifend kompatibel?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.