So funktioniert’s
- Wählen Sie unter „Typ“ die Option „Linear“, „Radial“ oder „Konisch“.
- Stellen Sie für „Linear“ oder „Konisch“ den „Winkel“ ein. Bei „Radial“ wählen Sie die „Form“, bei „Radial“ und „Konisch“ zusätzlich die „Position“.
- Legen Sie unter „Farbstopps“ die Farben mit dem Farbwähler fest.
- Klicken Sie bei Bedarf auf „+ Farbstopp hinzufügen“ und ziehen Sie die Markierungen an die gewünschten Stellen.
Beispiele
Blauer Hintergrund für einen Website-Kopfbereich
Radial · Ellipse · oben links · #2451E8 bei 0 % · #6B4EFF bei 100 %
background: radial-gradient(ellipse at top left, #2451E8 0%, #6B4EFF 100%);
Dunkle Überlagerung für ein Titelbild
Linear · 180° · #000000 bei 0 % mit 0 % Deckkraft · #000000 bei 100 % mit 80 % Deckkraft
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
Zweifarbiger Hintergrund mit klarer Trennung
Linear · 90° · #2451E8 bei 50 % · #FFFFFF bei 50 %
background: linear-gradient(90deg, #2451E8 50%, #FFFFFF 50%);
Tipps
- Genaue Farben auswählen und Kontrast prüfen mit Farbwähler & HTML-Farbcodes.
- Den Verlauf mit dem HTML-Editor auf einer Seite ausprobieren.
Häufige Fragen
Warum hat „Wiederholend“ keinen sichtbaren Effekt?
Liegt der letzte Farbstopp bei 100 %, hat die Wiederholung keinen sichtbaren Effekt. Verschieben Sie ihn beispielsweise auf 25 %.
Wie viele Farben kann ich verwenden?
Sie können zwei bis acht Farbstopps verwenden. Bei acht Stopps ist „+ Farbstopp hinzufügen“ deaktiviert; bei zwei Stopps lässt sich keiner mehr entfernen.
Warum ändert sich der CSS-Code bei einer Eingabe nicht?
Bei einer ungültigen Eingabe bleiben CSS-Code und Vorschau beim letzten gültigen Farbverlauf. Das betroffene Feld wird rot markiert und zeigt einen Hinweis.
Wird mein Farbverlauf gespeichert?
Der letzte gültige Farbverlauf wird im localStorage Ihres Browsers gespeichert und beim nächsten Besuch wiederhergestellt. „Zurücksetzen“ löscht diesen gespeicherten Zustand.
Kann ich nur den Farbverlaufswert statt der ganzen CSS-Deklaration kopieren?
Sie können entweder die vollständige Deklaration „background: …;“ oder nur die Farbverlaufsfunktion kopieren. Der reine Wert eignet sich beispielsweise für Inline-Styles oder Design-Tokens.