Conic gradient, efektowne gradienty na stronie

Teoria i zasada działania

Podstawową zasadą działania conic-gradient() jest sposób poruszania się linii wiodącej. Punktem startowym jest linia pionowa, następnie poruszamy się w prawo po okręgu. Conic-gradient jest podobną funkcją do radial-gradient, jednak z tą różnicą, że możemy wykorzystać wiele barw na okręgu.

Oczywiście nie musimy poruszać się płynnie od koloru do koloru. Dostępne są także wartości procentowe (%), kątowe (deg) oraz zakres obrotu (turn). Możemy również określić pozycję, z której zaczniemy nasz obrót.

Przykład 1

Na początek przedstawię sposób na uzyskanie efektu z obrazu głównego (patrz wyżej).

.gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: conic-gradient(red, orange, yellow, green, blue, red);
  top: 0;
  left: 0;
}

Omówienie: startujemy w punkcie zero (w pionie) i poruszamy się w prawo po okręgu. Płynnie wykorzystujemy kolory: czerwony, pomarańczowy, żółty, zielony, niebieski i kończymy na czerwonym, by uzyskać płynne zakończenie kolorem początkowym.

Przykład 2

Drugim przykładem będzie twarde oddzielanie barw.

.gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: conic-gradient(red 16deg, orange 16deg 28deg, yellow 28deg 65deg, green 65deg 91deg, blue 91deg 300deg, purple 300deg);
  top: 0;
  left: 0;
}

Powyższy przykład będzie się prezentował następująco:

dark

Przykład 3

Kolejny przykład to powtarzalny conic-gradient(), czyli repeating-conic-gradient(), dzięki któremu możemy powtórzyć wielokrotnie sekwencję barw.

.gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(#009FFF 10%, #ec2F4B 30%);
  top: 0;
  left: 0;
}

Oto co uzyskamy:

dark

Przykład 4

Przykładów można by tu mnożyć, jednak chodzi tu bardziej o pokazanie możliwości.

.gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: conic-gradient(red, cyan, deeppink, rebeccapurple, red);
  top: 0;
  left: 0;
}

Bardzo ciekawe połączenie barw. Oto co otrzymamy:

dark

Podsumowanie i wykorzystanie

Kończąc ten wpis chciałbym zwrócić uwagę na ilość kombinacji i możliwości wykorzystania funkcji conic-gradient(). Od prostego przejścia od jednego w drugi kolor, przez malowanie wielobarwnych obrazów, aż po przedstawianie diagramów kołowych do celów statystycznych.