tigtools

CSS-Farbverlauf-Generator

Wählen Sie Farben und Positionen, legen Sie den Verlaufstyp fest und kopieren Sie den fertigen CSS-Code.

Läuft in Ihrem Browser Keine Anmeldung erforderlich

Typ
135°
Farbmarken
  1. Farbmarke 1
    #0b5d1e
    0%
    100%
  2. Farbmarke 2
    #f2c14e
    100%
    100%
Ein Verlauf hat hier 2 bis 6 Farbmarken.

Anleitung

  1. Wählen Sie linear, radial oder konisch und legen Sie dann den Winkel oder die Mittelpunktposition fest.
  2. Legen Sie für jeden Farbstopp Farbe, Deckkraft und Position fest. Fügen Sie bis zu sechs Farbstopps hinzu oder entfernen Sie nicht benötigte.
  3. Prüfen Sie die Vorschau und kopieren Sie anschließend die CSS-Zeile in Ihr Stylesheet.

So funktioniert es

Die Ausgabe ist eine standardmäßige CSS-Hintergrunddeklaration. Lineare Farbverläufe verlaufen entlang eines Winkels: 0deg verläuft von unten nach oben, 90deg von links nach rechts und 180deg von oben nach unten. Radiale Farbverläufe breiten sich von einem Mittelpunkt als Kreis oder als an den Container angepasste Ellipse aus. Konische Farbverläufe verlaufen kreisförmig um einen Mittelpunkt und beginnen beim gewählten Winkel – nützlich für tortenähnliche Effekte und Farbkreise.

Farbstopps werden in der Reihenfolge ihrer Position angegeben und lassen sich daher frei verschieben. Ein Farbstopp mit reduzierter Deckkraft wird als rgba() ausgegeben, sodass der Hintergrund durchscheint. Zwei Farbstopps an derselben Position erzeugen eine harte Kante statt eines fließenden Übergangs – so entstehen Streifen.

Alle drei Verlaufsfunktionen funktionieren in allen aktuellen Browsern. Farbverläufe werden standardmäßig im sRGB-Farbraum gemischt. Zwischen Komplementärfarben (zum Beispiel Blau und Gelb) kann das leicht gräulich wirken. Ein zusätzlicher mittlerer Farbstopp mit einem helleren Farbton schafft Abhilfe.

Beispiele

Dezenter Header-Hintergrund

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) erzeugt einen sanften Verlauf von oben nach unten, auf dem dunkler Text gut lesbar bleibt.

Streifen mit harter Kante

Verwenden Sie vier Farbstopps: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Die beiden Farbstopps bei 50% treffen ohne Übergang aufeinander und bilden zwei einfarbige Hälften.

Spotlight-Effekt

Ein radialer Farbverlauf (circle at top left) von rgba(255, 255, 255, 0.6) zu rgba(255, 255, 255, 0), über eine Farbe gelegt, erzeugt ein sanftes Licht in der Ecke.

Häufig gestellte Fragen

In welche Richtung verläuft 0deg?

In CSS zeigt 0deg nach oben. Der Farbverlauf beginnt also unten und endet oben. 90deg verläuft von links nach rechts. Das unterscheidet sich von einigen Design-Apps, in denen 0° häufig von links nach rechts verläuft.

Kann ich den Farbverlauf auf Text anwenden?

Ja: Wenden Sie den Hintergrund an und fügen Sie anschließend background-clip: text und color: transparent hinzu. Achten Sie darauf, dass der Text an jeder Stelle des Farbverlaufs vor dem Seitenhintergrund lesbar bleibt.

Benötige ich Herstellerpräfixe wie -webkit-linear-gradient?

Nein. Aktuelle Browser unterstützen die Syntax ohne Präfix. Präfixe sind nur für Browser nötig, die viele Jahre alt sind.

Datenschutz

Alles wird in Ihrem Browser erstellt. Ihre Farben und Einstellungen werden weder übertragen noch gespeichert.