CSS Academy · Lektion

Verläufe: linear und radial

Erstellen Sie mit linear-gradient() und radial-gradient() sanfte Farbübergänge.

Lektion 3 von 413 Schritte

Verläufe: linear und radial ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein CSS-Farbverlauf?

CSS-Farbverläufe sind generierte Bilder (es wird keine Bilddatei benötigt), die zwischen zwei oder mehr Farben überblenden. Sie werden als Werte von background-image oder der Kurzschreibweise background angegeben.

Grundlagen von linear-gradient()

Ein linearer Farbverlauf lässt Farben entlang einer geraden Linie überblenden. Das erste Argument legt die Richtung fest, danach folgen die Farbstopps.

<div class="gradient-demo"></div>

Richtung des Farbverlaufs: Schlüsselwörter und Winkel

Für die Richtung können Sie Schlüsselwörter oder Winkel in Grad verwenden:

<div class="dir-keyword"></div>
  <div class="dir-45deg"></div>
  <div class="dir-135deg"></div>

Mehrere Farbstopps

Fügen Sie so viele Farbstopps wie nötig hinzu. Jeder Stopp kann optional eine Position (Länge oder Prozentwert) angeben.

<div class="stops"></div>

Harte Farbstopps

Legen Sie zwei Stopps an derselben Position fest, um einen harten Stopp zu erzeugen — einen abrupten Farbwechsel ohne Überblendung.

<div class="hard-stop"></div>

Wiederholender linearer Farbverlauf

repeating-linear-gradient() wiederholt das Muster des Farbverlaufs, um Streifen und Texturen zu erzeugen.

<div class="stripes"></div>

Grundlagen von radial-gradient()

Ein radialer Farbverlauf breitet sich von einem Mittelpunkt ausgehend in elliptischer oder kreisförmiger Form nach außen aus.

<div class="radial-demo"></div>

Form und Größe radialer Farbverläufe

Steuern Sie die Form des Farbverlaufs (circle oder ellipse) und das Schlüsselwort für seine Ausdehnung:

<div class="radial-circle"></div>
  <div class="radial-ellipse"></div>

Position radialer Farbverläufe

Verwenden Sie nach Form und Größe at <position>, um den Mittelpunkt des radialen Farbverlaufs zu verschieben.

<div class="radial-position"></div>

Konischer Farbverlauf

conic-gradient() verteilt Farben wie bei einem Kreisdiagramm um einen Mittelpunkt. Er benötigt den Startwinkel from und optional die Position at.

<div class="conic-demo"></div>

Transparenz in Farbverläufen

Verwenden Sie transparent oder rgba() in Farbstopps, um vom Hintergrund des Elements gleichmäßig ein- oder auszublenden.

<div class="fade-overlay"></div>

Schnelltest

Welche CSS-Funktion erzeugt einen Farbverlauf, der sich von einem Mittelpunkt ausgehend nach außen ausbreitet?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Lineare Farbverläufe verlaufen entlang einer Linie, radiale Farbverläufe breiten sich nach außen aus und konische Farbverläufe drehen sich um einen Punkt. Verwenden Sie harte Stopps für Streifen. Alle Farbverlaufsfunktionen sind Werte von background-image und erzeugen Bilder ohne externe Dateien.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Verläufe: linear und radial“ kostenlos?

Ja — der vollständige Text von „Verläufe: linear und radial“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Verläufe: linear und radial“?

Erstellen Sie mit linear-gradient() und radial-gradient() sanfte Farbübergänge. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Verläufe: linear und radial“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy