W3Docs

Darstellung

Deutsch

CSS-Verläufe ​

CSS-Verläufe zeigen stufenlose Übergänge zwischen zwei oder mehr angegebenen Farben an. Verläufe können in Hintergründen verwendet werden.

Es gibt drei Arten von Verläufen:

Lineare Verläufe ​

Die Funktion linear-gradient erstellt ein Bild, das aus einem sanften Übergang zwischen zwei oder mehr Farben entlang einer geraden Linie besteht. Sie kann einen Startpunkt und eine Richtung zusammen mit dem Verlaufseffekt haben.

Gradients

Syntax ​

Die Syntax des linearen Verlaufs

css
background-image: linear-gradient(direction, color1, color2, ...);

Von oben nach unten ​

Lineare Verläufe verlaufen standardmäßig von oben nach unten.

Beispiel für einen linearen Verlauf von oben nach unten: ​

linearer Verlauf von oben nach unten

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

TIP

Wir fügen background-color für Browser hinzu, die Verläufe nicht unterstützen.

Ändern der Rotation von linear-gradient durch Angabe der Richtung von links nach rechts.

linearer Verlauf von links nach rechts

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #0052b0 ,#b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Diagonale Verläufe ​

Verläufe können diagonal verlaufen, indem sowohl die horizontale als auch die vertikale Startposition angegeben wird. Er beginnt oben links und verläuft nach unten rechts.

Beispiel für den diagonalen Verlauf: ​

CSS-diagonaler Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to bottom right, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Verwendung von Winkeln ​

Definieren Sie einen Winkel statt einer Richtung, um mehr Kontrolle über die Verlaufsrichtung zu erhalten. 0deg erzeugt einen vertikalen Verlauf von unten nach oben, 90deg erzeugt einen horizontalen Verlauf von links nach rechts. Die Angabe negativer Winkel verläuft gegen den Uhrzeigersinn.

Beispiel für einen linearen Verlauf mit angegebenem Winkel: ​

linearer Verlauf mit Winkel

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(70deg, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Effekt mit mehreren Farben ​

CSS-Verlaufsfarben variieren je nach Position und erzeugen sanfte Farbübergänge. Es gibt keine Begrenzung bei der Verwendung von Farben.

Beispiel für einen linearen Verlauf mit mehreren Farben: ​

linearer Verlauf mit mehreren Farben

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Wir können auch einen linearen Verlauf mit mehreren Farben erstellen, indem wir eine Richtung angeben. Sie können jeder Farbe null, einen oder zwei Prozent- oder absolute Längenwerte zuweisen. 0% gibt den Startpunkt an, während 100% den Endpunkt angibt.

linearer Verlauf mit mehreren Farben von links nach rechts

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

linearer Verlauf mit mehreren Farben von rechts nach links

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Transparenz ​

Verläufe unterstützen Transparenz, sodass Sie mehrere Hintergründe verwenden können, um einen transparenten Effekt zu erzielen. Dazu können Sie die Funktion rgba() verwenden, um die Farbstopps zu definieren. Der letzte Parameter in der Funktion rgba() kann ein Wert von 0 bis 1 sein, der die Transparenz der Farbe definiert. 0 bedeutet vollständige Transparenz, 1 volle Farbe.

Beispiel für einen linearen Verlauf von voller Farbe zu transparent: ​

transparenter linearer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Wiederholter linearer Verlauf ​

Verwenden Sie die Funktion repeating-linear-gradient(), um einen linearen Verlauf zu wiederholen. Die Farben werden immer wieder durchlaufen, während sich der Verlauf wiederholt.

Beispiel für einen wiederholten linearen Verlauf: ​

wiederholter linearer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Radiale Verläufe ​

Radiale Verläufe strahlen von einem zentralen Punkt aus. Für die Erstellung eines radialen Verlaufs müssen mindestens zwei Farbstopps angegeben werden. Radiale Verläufe können kreisförmig oder elliptisch sein.

Syntax ​

Syntax des radialen Verlaufs

css
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Beispiel für einen radialen Verlauf mit drei Farben: ​

CSS-radialer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient( #ff0509, #fff700, #05ff33); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionierung radialer Farbstopps ​

Wie lineare Verläufe verwenden auch radiale Verläufe eine angegebene Position und absolute Länge.

Beispiel für unterschiedlich platzierte Farbstopps: ​

positionierte radiale Farbstopps

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue;
        background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionierung des Zentrums des radialen Verlaufs ​

Sie können die Mittelpunktposition des Verlaufs auch mit Prozentwerten oder absoluten Längen angeben.

Beispiel für einen radialen Verlauf mit positioniertem Zentrum: ​

positioniertes Zentrum des radialen Verlaufs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Form des radialen Verlaufs ​

Der Parameter shape definiert die Form des radialen Verlaufs. Er kann zwei Werte annehmen: circle oder ellipse. Der Standardwert ist eine Ellipse.

Beispiel für die Form eines radialen Verlaufs: ​

CSS-kreisförmiger und elliptischer radialer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(red, yellow, green);
      }
      .gradient2 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(circle, red, yellow, green); 
      }
    </style>
  </head>
  <body>
    <h2>Ellipse:</h2>
    <div class="gradient1"></div>
    <h2>Circle:</h2>
    <div class="gradient2"></div>
  </body>
</html>
Try it Yourself »

Größe des radialen Verlaufs ​

Im Gegensatz zu linearen Verläufen kann die Größe radialer Verläufe angegeben werden. Die Werte sind:

  • closest-corner
  • closest-side
  • farthest-corner(default)
  • farthest-side.

Beispiel für radiale Verläufe mit angegebener Größe: ​

CSS-radialer Verlauf mit closest-corner, closest-side, farthest-corner und farthest-side

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient2 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient3 {
        height: 150px;
        width: 150px;
        background-color: blue;
        background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient4 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
    </style>
  </head>
  <body>
    <h2>closest-side:</h2>
    <div class="gradient1"></div>
    <h2>farthest-side:</h2>
    <div class="gradient2"></div>
    <h2>closest-corner:</h2>
    <div class="gradient3"></div>
    <h2>farthest-corner:</h2>
    <div class="gradient4"></div>
  </body>
</html>
Try it Yourself »

Wiederholter radialer Verlauf ​

Die CSS-Funktion repeating-radial-gradient() erstellt ein Bild, das aus sich wiederholenden Verläufen besteht, die von einem Ursprungspunkt ausgehen.

Beispiel für den wiederholten radialen Verlauf: ​

CSS-wiederholter radialer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .gradient {
        height: 200px;
        width: 200px;
        background-color: blue; 
        background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Konische Verläufe ​

Die Funktion conic-gradient erstellt ein Bild, das aus einem Verlauf mit Farbübergängen besteht, die sich um einen Mittelpunkt drehen.

Syntax ​

CSS-konischer Verlauf

css
background-image: conic-gradient(color1, color2);

Beispiel für einen einfachen konischen Verlauf: ​

CSS-konischer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(#ff0000, #fff200);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionierung des Zentrums des konischen Verlaufs ​

Wie bei radialen Verläufen kann das Zentrum des konischen Verlaufs mit Prozentwerten oder absoluten Längen unter Verwendung des Schlüsselworts "at" positioniert werden.

Beispiel für einen konischen Verlauf mit positioniertem Zentrum: ​

CSS-konischer Verlauf mit positioniertem Zentrum

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Ändern des Winkels ​

Der Winkel des konischen Verlaufs kann mit dem Schlüsselwort "from" gedreht werden.

Beispiel für einen konischen Verlauf mit gedrehtem Winkel: ​

CSS-konischer Verlauf mit gedrehtem Winkel

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Wiederholter konischer Verlauf ​

Die CSS-Funktion repeating-conic-gradient() erstellt ein Bild, das aus einem sich wiederholenden Verlauf mit Farbübergängen besteht, die sich um einen Mittelpunkt drehen.

Beispiel für den wiederholten konischen Verlauf: ​

CSS-wiederholter konischer Verlauf

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Übung ​

Welche Arten von CSS-Verläufen werden auf der Webseite erwähnt?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.