Verläufe¶

linear-gradient()¶

Der CSS-Funktionswert linear-gradient() erzeugt einen linearen Farbverlauf, dem mehrere Argumente übergeben werden. Ein linearer Verlauf besteht mindestens aus zwei Farben, kann aber beliebig viele Farben enthalten. Optional kann eine Richtung angegeben werden.

Richtung des Farbverlaufs

Die Richtung bestimmt, von wo nach wo der Farbverlauf verläuft. Diese wird entweder mit einer Gradangabe z. B. 45deg oder einer Richtungsangabe wie to top, to bottom, to left, to right mit den Kombinationen z. B. to top left oder to right bottom angegeben.

.box1 {
  background-image: linear-gradient(deeppink, orange);
}

.box2 {
  background-image: linear-gradient(90deg, aqua, gold);
}

.box3 {
  background-image: linear-gradient(
    to top left,
    aqua,
    gold,
    #aaffee,
    rgb(125, 23, 88)
  );
}

.box4 {
  background-image:
    url("../images/stars.png"),
    linear-gradient(45deg, rebeccapurple, crimson, #eeaa44, rgb(25, 123, 188));
}

Start- und Stop-Farben

Standardmäßig verteilt der Browser die Farben gleichmäßig über den gesamten Verlauf. Es ist aber auch möglich, exakt festzulegen, an welcher Position eine Farbe erscheinen soll.

Diese Positionen nennt man Color Stops.

Eine Farbe kann daher mit einer Positionsangabe kombiniert werden: Farbe Position.

Die Position kann in verschiedenen Einheiten angegeben werden, zum Beispiel:

Prozent (%) → relativ zur Größe des Elements
Pixel (px) → eine feste Position innerhalb des Elements

Color Stops mit Prozent

Bei Prozentangaben wird die Position relativ zur Größe des Elements berechnet. 0% entspricht dem Anfang des Verlaufs und 100% dem Ende.

.box5 {
  background-image: linear-gradient(
    to right,
    red 0%,
    yellow 40%,
    lime 70%,
    blue 100%
  );
}

red 0% → Startfarbe ganz links
yellow 40% → Gelb erscheint bei 40 % der Breite
lime 70% → Grün erscheint bei 70 %
blue 100% → Endfarbe ganz rechts

Color Stops mit Pixeln

Statt Prozent kann auch eine feste Pixelposition angegeben werden. Dann erscheint die Farbe genau an dieser Stelle im Verlauf.

.box6 {
  background-image: linear-gradient(
    to right,
    red 0px,
    orange 100px,
    yellow 200px,
    green 300px
  );
}

red 0px → Startfarbe am Anfang
orange 100px → Orange beginnt nach 100 Pixeln
yellow 200px → Gelb beginnt nach 200 Pixeln
green 300px → Grün beginnt nach 300 Pixeln

Harte Farbkanten erzeugen

Wenn zwei Farben die gleiche Position haben, entsteht kein weicher Übergang, sondern eine scharfe Farbkante. Hier wechselt die Farbe genau bei 150 Pixeln abrupt von Rot zu Blau.

.box7 {
  background-image: linear-gradient(to right, red 150px, blue 150px);
}

Bemerkung

Bilder und Farbverläufe können auch kombiniert werden.

radial-gradient()¶

Der CSS-Funktionswert radial-gradient() erzeugt einen radialen, also kreisförmigen oder elliptischen, Farbverlauf. Der Verlauf breitet sich vom Mittelpunkt nach außen aus. Er kann aus mehreren Farben bestehen und erlaubt die Angabe von Form, Größe und Position.

Form und Größe

Form: circle (kreisförmig) oder ellipse (Standard).
Größe:
- closest-side, closest-corner
- farthest-side, farthest-corner (Standard)
Position des Zentrums: z. B. center, top, left 20%, etc.

Größe des Verlaufs

Die Größe bestimmt, wie weit der Farbverlauf vom Zentrum reicht. Hier gibt es vier Schlüsselbegriffe:

Wert	Bedeutung
closest-side	Der Farbverlauf endet an der nächsten Seite des Containers. Beispiel: Das Zentrum ist mittig, der Kreis berührt die Seite, die am nächsten liegt.
closest-corner	Der Verlauf endet an der nächsten Ecke des Containers. Ideal, wenn man einen kreisförmigen Verlauf möchte, der bis zur nächstgelegenen Ecke reicht.
farthest-side	Der Verlauf endet an der am weitesten entfernten Seite des Containers. Das Zentrum ist mittig, der Kreis erreicht die entfernteste Seite.
farthest-corner	Der Verlauf endet an der am weitesten entfernten Ecke des Containers. Standardwert für elliptische oder kreisförmige Verläufe, wenn man den Verlauf maximal ausdehnen möchte.

.box1 {
  background-image: radial-gradient(circle, red, yellow);
}

.box2 {
  background-image: radial-gradient(ellipse at top left, aqua, purple, black);
}

.box3 {
  background-image: radial-gradient(
    farthest-corner at 30% 70%,
    gold,
    teal,
    navy
  );
}

conic-gradient()¶

Der CSS-Funktionswert conic-gradient() erzeugt einen kegelförmigen Farbverlauf, der um einen Mittelpunkt rotiert. Die Farben werden im Kreis um 360° verteilt. Er eignet sich besonders für pie-charts oder farbige Ringe.

Position & Startwinkel

Position: at center (Standard), at top left, at 50% 80%
Optional kann ein Startwinkel angegeben werden: from 90deg

.box1 {
  background-image: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

.box2 {
  background-image: conic-gradient(from 45deg at center, tomato, gold, teal);
}

.box3 {
  background-image: conic-gradient(
    at top right,
    purple 0deg,
    pink 120deg,
    white 240deg
  );
}

repeating-linear-gradient()¶

Der CSS-Funktionswert repeating-linear-gradient() funktioniert wie ein normaler linearer Verlauf, wiederholt aber das Muster unendlich entlang der Verlaufsachse. Das ermöglicht Streifenmuster, Linien oder Texturen.

.box1 {
  background-image: repeating-linear-gradient(
    45deg,
    black,
    black 10px,
    white 10px,
    white 20px
  );
}

repeating-radial-gradient()¶

Der CSS-Funktionswert repeating-radial-gradient() erzeugt einen wiederholten radialen Farbverlauf, ideal für konzentrische Kreise oder Muster.

.box1 {
  background-image: repeating-radial-gradient(
    circle,
    #ff0000,
    #ff0000 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

repeating-conic-gradient()¶

Der CSS-Funktionswert repeating-conic-gradient() wiederholt ein kegelförmiges Muster um 360°. Perfekt für Zackenmuster, Kreissegmente oder dekorative Hintergründe.

.box1 {
  background-image: repeating-conic-gradient(
    from 0deg,
    teal 0deg 20deg,
    gold 20deg 40deg
  );
}