CSS-Farbverlaufsgenerator

Erstelle wunderschöne CSS-Gradienten mit Live-Vorschau und Code-Generierung

Farbstopps

#ff6b6b
#4ecdc4

Live-Vorschau

CSS-Code

background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
Erweiterte Optionen

Verlauf

1 / 1
Vorlagen
Verlauf
1 Farbverläufe

Tipps

Lineare Gradienten übertragen Farben in einer geraden Linie. Perfekt für subtile Hintergründe und moderne Designs.

CSS-Farbverlaufsgenerator

Erstelle wunderschöne CSS-Gradienten mit Live-Vorschau und Code-Generierung

Anleitung

  1. Wählen Sie Ihren Gradient-Typ (linear, radial oder konisch)
  2. Wählen Sie die Richtung oder den Winkel für Ihren Gradient
  3. Fügen Sie Farbstopps hinzu, indem Sie auf 'Farbe hinzufügen' klicken
  4. Passen Sie Farben mit dem Farbwähler für jeden Stopp an
  5. Positionieren Sie Farbstopps mit dem Schieberegler (0-100%)
  6. Vorschau Ihres Gradienten in Echtzeit
  7. Kopieren Sie den generierten CSS-Code für Ihr Projekt