CodeWorlds
Funkcja CSSFunkcje i jednostki

conic-gradient()

Tworzy przejście kolorów dookoła punktu, jak wskazówka zegara. Rysuje wykresy kołowe, koła barw i obracające się obwódki.

Na tej stronie

Przykład

#
CSS
.chart {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #7c3aed 0 40%,
    #0ea5e9 0 75%,
    #10b981 0
  );
}
Podgląd

Każdy kolor zaczyna się od 0, czyli tam, gdzie skończył się poprzedni. Wystarczy podać, do którego miejsca ma sięgać.

Definicja i zastosowanie

#

Funkcja conic-gradient() rozkłada kolory po okręgu wokół środka, zgodnie z ruchem wskazówek zegara, zaczynając od góry. Kolor zmienia się wraz z kątem, a nie z odległością od środka, jak w radial-gradient(). Wynikiem jest obraz, więc wpisujesz go w background lub background-image.

Pozycje kolorów podajesz w stopniach albo procentach pełnego obrotu: #7c3aed 0deg 120deg wypełnia jedną trzecią koła. Dwa kolory w tej samej pozycji dają ostrą granicę, dzięki czemu z kilku przedziałów zbudujesz wykres kołowy bez żadnej grafiki. Z border-radius: 50% element staje się okrągły.

Słowo from obraca punkt startowy (from 90deg zaczyna po prawej), a at przesuwa środek (at 30% 40%). Gdy chcesz płynnego koła barw, ostatni kolor powinien być taki sam jak pierwszy, inaczej u góry pojawi się ostra krawędź.

Wersja repeating-conic-gradient() powtarza wzór, co pozwala narysować szachownicę jedną deklaracją, np. repeating-conic-gradient(#27272a 0 25%, #3f3f46 0 50%) z background-size. Animując kąt from przez zmienną zarejestrowaną w @property, zrobisz obracającą się obwódkę albo wskaźnik ładowania.

Składnia

#
Składnia
conic-gradient([from <kąt>]? [at <pozycja>]?, <kolor> <kąt>?, <kolor> <kąt>?, …)

Warianty zapisu

#

  • koło barw

    płynny obrót kolorów

    Kolory tęczy rozłożone dookoła. Ostatni jest taki sam jak pierwszy, więc u góry nie ma ostrej krawędzi.

  • from 90deg

    start po prawej

    Słowo from obraca punkt startowy. Bursztynowa ćwiartka zaczyna się na godzinie trzeciej zamiast na dwunastej.

  • at 30% 30%

    przesunięty środek

    Po at podajesz położenie środka. Kolory zbiegają się w lewej górnej części koła.

  • wykres kołowy

    40%, 35% i 25%

    Ostre przedziały zamiast przejść. Każdy kolor zaczyna się od 0, czyli tam, gdzie skończył poprzedni.

  • pierścień postępu

    65%

    Wycinek 65% na szarym tle, a maska z gradientem radialnym wycina środek, więc z koła zostaje pierścień.

  • repeating-conic-gradient()

    szachownica

    Powtarzany wzór dwóch ćwiartek w kafelku 22 × 22 px. Tak rysuje się szachownicę, np. pod przezroczystymi obrazkami.

Warianty zapisu w praktyce

#

koło barw

Kolory tęczy rozłożone dookoła. Ostatni jest taki sam jak pierwszy, więc u góry nie ma ostrej krawędzi.
.demo {
  background: conic-gradient(red, yellow, lime,
    aqua, blue, magenta, red);
}

from 90deg

Słowo from obraca punkt startowy. Bursztynowa ćwiartka zaczyna się na godzinie trzeciej zamiast na dwunastej.
.demo {
  background: conic-gradient(from 90deg,
    #f59e0b 0 25%, #27272a 0);
}

at 30% 30%

Po at podajesz położenie środka. Kolory zbiegają się w lewej górnej części koła.
.demo {
  background: conic-gradient(at 30% 30%,
    #7c3aed, #0ea5e9, #10b981, #7c3aed);
}

wykres kołowy

Ostre przedziały zamiast przejść. Każdy kolor zaczyna się od 0, czyli tam, gdzie skończył poprzedni.
.demo {
  background: conic-gradient(#7c3aed 0 40%,
    #0ea5e9 0 75%, #10b981 0);
}

pierścień postępu

Wycinek 65% na szarym tle, a maska z gradientem radialnym wycina środek, więc z koła zostaje pierścień.
.demo {
  background:
    conic-gradient(#10b981 65%, #27272a 0);
  mask: radial-gradient(closest-side,
    transparent 68%, #000 69%);
}

repeating-conic-gradient()

Powtarzany wzór dwóch ćwiartek w kafelku 22 × 22 px. Tak rysuje się szachownicę, np. pod przezroczystymi obrazkami.
.demo {
  border-radius: 12px;
  background: repeating-conic-gradient(
    #27272a 0 25%, #a1a1aa 0 50%) 0 0 / 22px 22px;
}

Obsługa przeglądarek

#

Szeroko dostępne · od 2020 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • W wykresach kołowych podawaj pozycję początkową jako 0: przeglądarka zacznie kolor tam, gdzie skończył się poprzedni, i nie trzeba powtarzać liczb.
  • Wykres zrobiony w CSS nie jest czytelny dla czytników ekranu. Dodaj obok legendę z wartościami albo opis w aria-label.
  • Obracający się gradient zrobisz, animując from var(--kat) ze zmienną zarejestrowaną przez @property jako <angle>.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs
Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK