Funkcja CSS conic-gradient()

Definicja i użycie

CSS conic-gradient() Funkcja ustawia gradient koniczny jako obraz tła.

Gradient koniczny to przejście kolorów obracające się wokół punktu centralnego (podobne do ciasta i kolowa).

Aby utworzyć gradient koniczny, należy przynajmniej zdefiniować dwa punkty zatrzymania koloru.

Gradient koniczny z trzech kolorów:

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

Gradient koniczny z pięciu kolorów:

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

Gradient koniczny z trzech kolorów, dla każdego koloru określono kąt:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

Przez dodanie border-radius: 50% koniczny gradient wygląda jak ciasto:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Przechylony gradient z początkowym kątem:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

Przechylony gradient z pozycją środka:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Przechylony gradient z początkowym kątem i pozycją środka:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Inny przykład wykresu kołowego:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

background-image: conic-gradient([from kąt] pozycja,] stopień koloru, stopień koloru, ...);

wartość	opis
from kąt	opcjonalnie. Cały przechylony gradient będzie obracał się o ten kąt. Domyślna wartość to 0deg.
at pozycja	opcjonalnie. Określa pozycję środka przechylonego gradientu. Domyślna wartość to center.
stopień koloru, ... stopień koloru	Punkt zatrzymania koloru to kolor, który ma być prezentowany w miarę płynnego przejścia. Ta wartość składa się z wartości koloru i opcjonalnej pozycji zatrzymania (kąt od 0 do 360 stopni lub procent od 0% do 100%)

wartość

opis

from kąt

opcjonalnie. Cały przechylony gradient będzie obracał się o ten kąt. Domyślna wartość to 0deg.

at pozycja

opcjonalnie. Określa pozycję środka przechylonego gradientu. Domyślna wartość to center.

stopień koloru, ... stopień koloru

Punkt zatrzymania koloru to kolor, który ma być prezentowany w miarę płynnego przejścia.

Ta wartość składa się z wartości koloru i opcjonalnej pozycji zatrzymania (kąt od 0 do 360 stopni lub procent od 0% do 100%)