CSS radial-gradient()- Funktion
Beispiel
Ein radialer Farbverlauf mit gleichmäßig verteilten Farbstopps:
#grad {
background-image: radial-gradient(red, green, blue);
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Funktion radial-gradient() legt einen radialen Farbverlauf als Hintergrundbild fest.
Ein radialer Farbverlauf wird durch seinen Mittelpunkt definiert.
Um einen radialen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren.
Beispiel für einen radialen Gradienten:
| Ausführung: | CSS3 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Funktion vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
| Function | |||||
|---|---|---|---|---|---|
| radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS-Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| Value | Description |
|---|---|
| shape | Defines the shape of the gradient. Possible values:
|
| size | Defines the size of the gradient. Possible values:
|
| position | Defines the position of the gradient. Default is "center" |
| start-color, ..., last-color | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Mehr Beispiele
Beispiel
Ein radialer Farbverlauf mit unterschiedlich beabstandeten Farbstopps:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
Beispiel
Ein radialer Verlauf mit der Form eines Kreises:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Beispiel
Ein radialer Farbverlauf mit Schlüsselwörtern unterschiedlicher Größe:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
Verwandte Seiten
CSS-Tutorial: CSS-Verläufe