CSS-Verläufe

CSS-Verläufe ermöglichen die Erstellung von Farbverläufen ohne Bilder. Damit können wir moderne, responsive und ästhetische Hintergründe gestalten.

Lineare Verläufe

Ein linearer Verlauf verändert die Farben entlang einer geraden Linie. Die Richtung kann mit Schlüsselwörtern (to right, to bottom) oder Winkelangaben (45deg) festgelegt werden.

Im folgenden Beispiel wird ein linearer Verlauf von Rot nach Gelb definiert:

Radiale und konische Verläufe

Ein radialer Verlauf breitet sich kreisförmig aus, während ein konischer Verlauf die Farben strahlenförmig von einem Mittelpunkt aus verändert. Beide erzeugen besondere visuelle Effekte.

Beispiel für radialen Verlauf

Ein radialer Verlauf eignet sich beispielsweise für Lichteffekte oder zentrale Hervorhebungen.

Mehrere Farben und Farb-Stopps

In Verläufen können mehrere Farben angegeben werden, wobei Farb-Stopps die genauen Übergangspunkte definieren.

Transparente Verläufe

Mit rgba-Farben oder opacity können transparente Verläufe erzeugt werden, z. B. als Überlagerung über Bildern.

Wiederholende Verläufe

Die Funktionen repeating-linear-gradient und repeating-radial-gradient ermöglichen die Erstellung wiederholender Muster im Hintergrund.

Tipps zur Verwendung von Verläufen

Mit Verläufen können wir dynamische und moderne Oberflächen erstellen. Hier einige Tipps:

• Vermeide zu viele Farben, da dies leicht störend wirken kann.
• Verwende transparente Farben (rgba) für sanfte Effekte.
• Kombiniere mehrere Verläufe mit der Kurzschreibweise <background>, um komplexere Designs zu erzielen.