CSS Farbverlauf Generator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Warum einen visuellen Farbverlauf Generator verwenden?
CSS-Verläufe manuell zu schreiben ist mühsam — die Syntax von linear-gradient(), radial-gradient() und conic-gradient() mit mehreren Farbstops und Positionen zu merken ist fehleranfällig. Unser visueller Generator ermöglicht Farbstop-Verwaltung mit Farbwählern und Position-Schiebereglern, mit Live-Vorschau die sofort aktualisiert, was die Verlaufserstellung schnell und intuitiv macht.
3 Verlaufstypen
Lineare, radiale und konische Verläufe alle mit typspezifischen Steuerelementen unterstützt
Mehrfarbige Verläufe
Unbegrenzt viele Farbstops hinzufügen und ihre Positionen verschieben für komplexe mehrfarbige Verläufe
Live-Vorschau
Verlauf wird in Echtzeit gerendert während Sie Farben, Positionen und Winkel anpassen
CSS Farbverlauf erstellen
Verlaufstyp wählen
Linearen, radialen oder konischen Verlauf wählen und Winkel oder Richtung festlegen
Farbstops konfigurieren
Farbwähler für jeden Stop-Ton verwenden und Schieberegler zum Positionieren
CSS kopieren
'CSS kopieren' für die vollständige background-Eigenschaft für Ihr Stylesheet klicken
CSS Verlaufs-Anwendungsfälle
Hero-Hintergründe
Atemberaubende ganzseitige Hintergründe mit diagonalen oder radialen Verläufen erstellen
Verlaufs-Text
Verläufe auf Text mit background-clip: text für auffällige typografische Effekte anwenden
Verlaufs-Rahmen
border-image mit Verläufen für farbige Rahmen auf Elementen verwenden
Bild-Überlagerungen
Verläufe über Bilder legen für dunkle Überlagerungen die Textlesbarkeit ermöglichen
CSS Verlaufs-Best-Practices
✓ 135deg für diagonale Verläufe verwenden
Ein Winkel von 135 Grad erzeugt eine klassische Diagonale von oben-links nach unten-rechts die natürlich und dynamisch wirkt — eine beliebte Wahl für Hero-Bereiche.
✓ Verläufe subtil für UI halten
Für UI-Elemente (Buttons, Karten) sehr subtile Verläufe der gleichen Farbe mit 10-20% Helligkeitsunterschied verwenden für Tiefe ohne visuelles Rauschen.
✓ Fallback-Farbe bereitstellen
Eine Volltonfarbe vor dem Verlauf als Fallback hinzufügen: background-color: #6366f1; background: linear-gradient(...).
✓ Verlaufsposition animieren
CSS-Verläufe können nicht direkt animiert werden, aber background-position auf einem größeren Verlauf kann für einen fließenden Effekt animiert werden.
❓ Häufig gestellte Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe verlaufen entlang einer geraden Linie in einem Winkel. Radiale Verläufe strahlen von einem Mittelpunkt nach außen in Kreisen oder Ellipsen. Konische Verläufe rotieren um einen Mittelpunkt wie ein Tortendiagramm — ideal für Fortschrittsringe und Farbräder.
Wie erstellt man einen transparenten Verlauf?
transparent als Farbstop verwenden: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Damit entsteht ein Verlauf von halbtransparenter Farbe zu vollständig transparent — perfekt für Bild-Überlagerungen.
Warum hat mein Verlauf Banding oder Streifen?
Banding (sichtbare Streifen zwischen Farben) erscheint bei minderwertigen Displays oder Übergängen über ähnliche Farbtöne. Einen Zwischenfarbstop in einem komplementären Farbton hinzufügen um den Übergang zu glätten.
Kann man Verläufe als Rahmen verwenden?
Ja, border-image: linear-gradient(...) 1 verwenden. Das setzt den Verlauf als Rahmenbild. Alternativ ein ::before Pseudo-Element mit Verlaufs-Hintergrund und negativem z-index für simulierte Verlaufsrahmen verwenden.