CSS-Verläufe


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Hintergrund mit Farbverlauf:


Gradient Backgrounds

Mit CSS-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.

CSS definiert drei Arten von Farbverläufen:

  • Lineare Farbverläufe (geht nach unten/oben/links/rechts/diagonal)

  • Radiale Farbverläufe (definiert durch ihre Mitte)

  • Kegelförmige Verläufe (um einen Mittelpunkt gedreht)


CSS-Linearverläufe

Um einen linearen Farbverlauf zu erstellen, müssen Sie ihn definieren mindestens zwei Farbstopps. Farbstopps sind die Farben, die Sie für sanfte Übergänge verwenden möchten unter. Sie können auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen mit dem Farbverlaufseffekt.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Richtung - Von oben nach unten (dies ist die Standardeinstellung)

Das folgende Beispiel zeigt einen linearen Farbverlauf, der oben beginnt. Es beginnt rot und geht in Gelb über:

top to bottom (default)

Beispiel

  #grad {
  background-image: linear-gradient(red, yellow);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>


Richtung - von links nach rechts

Das folgende Beispiel zeigt einen linearen Farbverlauf, der von links beginnt. Es beginnt rot und geht in über Gelb:

left to right

Beispiel

  #grad {
  background-image: linear-gradient(to right, red , yellow);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>


Richtung - Diagonal

Sie können einen diagonalen Farbverlauf erstellen, indem Sie sowohl die horizontale als auch die vertikale Startposition angeben.

Das folgende Beispiel zeigt einen linearen Farbverlauf, der oben links beginnt (und nach unten rechts verläuft). Es beginnt rot und geht in Gelb über:

top left to bottom right

Beispiel

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>




Winkel verwenden

Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs wünschen, Sie können anstelle der vordefinierten Richtungen (nach unten, nach) einen Winkel definieren nach oben, nach rechts, nach links, nach unten rechts usw.). Ein Wert von 0 Grad entspricht "nach oben". Ein Wert von 90 Grad entspricht „nach rechts“. Ein Wert von 180 Grad entsprechen „nach unten“.

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Das folgende Beispiel zeigt, wie Winkel bei linearen Farbverläufen verwendet werden:

180deg

Beispiel

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>



Verwendung mehrerer Farbstopps

Das folgende Beispiel zeigt einen linearen Farbverlauf (von oben nach unten) mit mehrere Farbstopps:

Beispiel

  #grad {
  background-image: linear-gradient(red, yellow, green);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>


Das folgende Beispiel zeigt, wie Sie einen linearen Farbverlauf (von links nach rechts) mit der Farbe des Regenbogens und etwas Text erstellen:

Rainbow Background

Beispiel

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>



Transparenz nutzen

CSS-Verläufe unterstützen auch Transparenz, mit der sich Überblendungseffekte erzeugen lassen.

Um Transparenz hinzuzufügen, verwenden wir die Funktion rgba(), um die Farbstopps zu definieren. Der letzte Parameter in der Funktion rgba() kann ein Wert zwischen 0 und 1 sein definiert die Transparenz der Farbe: 0 bedeutet volle Transparenz, 1 zeigt Vollfarbe an (keine Transparenz).

Das folgende Beispiel zeigt einen linearen Farbverlauf, der von links beginnt. Es beginnt vollständig transparent und geht in die volle Farbe Rot über:

Beispiel

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>



Wiederholen eines linearen Gradienten

Die Funktion „repeating-linear-gradient()“ wird verwendet, um lineare Verläufe zu wiederholen:

Beispiel

Ein sich wiederholender linearer Farbverlauf:

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
} 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>