Funkcja CSS radial-gradient()

Poprzednia strona Funkcja pow() w CSS
Następna strona Funkcja ray() w CSS
Wróć do poprzedniego poziomu Podręcznik referencyjny funkcji CSS

Definicja i użycie

CSS radial-gradient() Funkcja ustawia radialny gradient jako obraz tła.

Radialny gradient jest zdefiniowany przez jego środek.

Aby utworzyć radialny gradient, należy zdefiniować co najmniej dwa stopnie barw.

Przykład radialnego gradientu:

Przykład

Przykład 1

Rozkład równomierny stopni barw w radialnym gradientzie:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Spróbuj sam

Przykład 2

Rozkład różnych stopni barw w radialnym gradientzie:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Spróbuj sam

Przykład 3

Gradienty radialne o kształcie okrągłym:

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

Spróbuj sam

Przykład 4

Użycie różnych słów kluczowych dla rozmiaru w gradientach radialnych:

#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);
}

Spróbuj sam

Gramatyka CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Wartość	Opis
shape	Definiuje kształt gradientu. Możliwe wartości: ellipse (domyślnie) circle
size	Definiuje rozmiar gradientu. Możliwe wartości: farthest-corner (domyślnie) closest-side closest-corner farthest-side
position	Definiuje pozycję gradientu. Domyślna wartość to "center".
start-color, ... , last-color	Etykiety kolorów to kolory, które mają być wyświetlane z płynnym przejściem między nimi. Ta wartość składa się z jednego koloru, po którym następuje jeden lub dwa opcjonalne pozycje etykiet kolorów (procenty między 0% a 100% lub długość wzdłuż osi gradientu).