Radial i conic gradient CSS — zaawansowane efekty wizualne
Podczas gdy linear-gradient jest najczęściej używanym typem gradientu CSS, jego kuzyni — radial-gradient i conic-gradient — oferują efekty wizualne niedostępne dla gradientu liniowego. Radialny gradient pozwala tworzyć efekty świetlne, bliki, cienie i organiczne tła. Stożkowy (conic) gradient jest naturalnym wyborem do wykresów kołowych, kółek postępu i mozaikowych wzorów. Generator Gradientów CSS na WikiPlus obsługuje wszystkie trzy typy.
Radial-gradient — składnia i kształty
Składnia `radial-gradient()`: `background: radial-gradient([shape size] at [position], colors...)`. Shape: circle (koło) lub ellipse (elipsa, domyślna). Size: closest-side, farthest-side, closest-corner, farthest-corner (domyślny), lub explicit wartości px/%. Position: at center (domyślne), at 30% 70%, at top left, itp. Przykłady: `radial-gradient(circle, #ffdd00, #ff6600)` — okrągły gradient żółty→pomarańczowy od centrum. `radial-gradient(ellipse at 20% 50%, rgba(255,0,128,0.8) 0%, transparent 50%)` — eliptyczna plama koloru w lewej części. `radial-gradient(circle at 50% 0%, rgba(255,255,255,0.3) 0%, transparent 60%)` — efekt blasku u góry (spotlight). Wielokrotne tła: `background: radial-gradient(circle at 20% 80%, red 0%, transparent 40%), radial-gradient(circle at 80% 20%, blue 0%, transparent 40%)` — dwie plamy kolorów.
Efekty świetlne z radial-gradient
Radial-gradient doskonale symuluje efekty świetlne bez użycia Photoshopa czy SVG. Spotlight (reflektor): `background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 60%)` na ciemnym tle — wrażenie światła padającego z góry na element. Neon glow: `box-shadow: 0 0 20px #0011ff, 0 0 60px rgba(0,17,255,0.4)` + `background: radial-gradient(circle at center, rgba(0,17,255,0.3), transparent 70%)` — efekt świecącego neonu. Vignette (winietowanie): `background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%)` — ciemnienie krawędzi jak efekt vintage. Lens flare: kilka małych radial-gradient z rgba białego na przezroczystym. Holographic card: kilka radial-gradient z różnymi kolorami tętniącymi animacją — efekt holograficznej karty kolekcjonerskiej.
Conic-gradient — wykresy kołowe i wzory
Conic-gradient() to stosunkowo nowy typ (CSS Level 4, obsługiwany od Chrome 69, Firefox 83, Safari 12.1). Przejście kolorów odbywa się wzdłuż kąta wokół punktu środkowego. Podstawowy wykres kołowy (pie chart): `background: conic-gradient(#0011ff 0% 40%, #ff6600 40% 65%, #00cc66 65% 100%)` — sekcje 40%, 25%, 35%. Kółko postępu (progress ring): `background: conic-gradient(#0011ff 0% 75%, #e0e0e0 75% 100%)` — 75% progress, maskowane koło/pierścień przez border-radius i pseudo-element. Tarcza zegara: conic-gradient z 60 kolorowymi wycinkami. Mozaikowe wzory: conic-gradient z ostrymi przejściami w połączeniu z background-size i background-repeat. Szachownica: `conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg)` z background-size: 40px 40px.
Repeating-radial-gradient — wzory koncentryczne
Analogicznie do repeating-linear-gradient, `repeating-radial-gradient()` powtarza wzorzec radialny. Pierścienie koncentryczne: `background: repeating-radial-gradient(circle, transparent, transparent 20px, rgba(0,17,255,0.1) 20px, rgba(0,17,255,0.1) 21px)` — subtelne okręgi jak na tarczy radarowej. Ripple efekt: podobny wzór z większymi wartościami jako statyczny element wizualny. Piksel art: małe repeating-radial-gradient z background-size px-by-px — bardziej dla zabawy niż produkcji. Kombinacja repeating-radial z repeating-linear tworzy złożone siatki i wzory bez jednego obrazu. Pamiętaj o background-size — bez niego gradient wypełni cały element, z background-size definiujesz rozmiar jednostkowy wzoru.
Często zadawane pytania
- Czy conic-gradient działa we wszystkich przeglądarkach?
- Tak, conic-gradient jest obsługiwany w Chrome 69+ (2018), Firefox 83+ (2020), Safari 12.1+ (2019), Edge 79+. Pokrycie ponad 97% użytkowników w 2026. Dla bardzo starych przeglądarek dodaj fallback: `background: #0011ff; background: conic-gradient(...)` — stara przeglądarka użyje jednolitego koloru.
- Jak zrobić kółko postępu (progress circle) z CSS?
- `background: conic-gradient(#0011ff 0% var(--progress, 75%), #e0e0e0 var(--progress, 75%) 100%)` + border-radius: 50% na okrągłym elemencie + wewnętrzne koło jako ::after tworzy ring. Zmień --progress przez JavaScript.
- Jak połączyć wiele gradientów CSS na jednym elemencie?
- CSS background akceptuje listę wartości rozdzielonych przecinkami. Pierwsza jest na wierzchu: `background: radial-gradient(circle at 20% 80%, red 0%, transparent 40%), linear-gradient(135deg, blue, purple)` — radialny na liniowym. Tak samo background-image: [grad1], [grad2], url(photo.jpg).