conic-gradient ile radial-gradient farkı nedir?

radial-gradient renkleri merkezden dışa doğru, yarıçap boyunca dağıtır — halka halka. conic-gradient ise renkleri merkez etrafında döndürerek dağıtır, yani açı boyunca. Pasta dilimi ve ilerleme halkası konik, ışık halesi ve nokta parlaması radyal gradyanla yapılır.

İlerleme halkasını JavaScript'siz güncelleyebilir miyim?

Değeri bir CSS değişkeninde tutarsan HTML tarafında style özniteliğiyle geçebilirsin: style="--ilerleme: 68%". CSS hiç değişmez, yalnızca değişkenin değeri sunucudan gelir. Dinamik güncelleme gerekiyorsa tek satır JavaScript ile aynı değişkeni yazman yeterli.

Neden gradyanımda halka halka çizgiler var?

Renk bantlanması. Tarayıcı geçişi 8 bit renk uzayında hesapladığı için çok yumuşak ve geniş geçişlerde ara tonlar yetmez. Geçiş aralığını daraltmak, ara duraklar eklemek veya çok düşük opaklıkta bir gürültü katmanı bindirmek etkiyi azaltır.

Konik gradyanı metne uygulayabilir miyim?

Evet. background-image olarak verip `background-clip: text` ve `color: transparent` yazarsan gradyan harflerin içinde görünür. Bu kalıp katalogdaki gradyanlı başlık efektlerinin temelidir; erişilebilirlik için okunur bir kontrast bırakmaya dikkat et.

from açısı hangi yönü gösterir?

0deg yukarıyı (saat 12) gösterir ve dönüş saat yönündedir. 90deg sağa, 180deg aşağı, 270deg sola bakar. Negatif değer de yazılabilir; from -90deg, from 270deg ile aynı sonucu verir.

conic-gradient()Orta291 efektte kullanılıyor

conic-gradient ile halka, pasta ve parıltı

conic-gradient() renkleri bir merkez noktasının etrafında döndürerek dağıtır. linear-gradient renkleri bir doğru boyunca, radial-gradient merkezden dışa doğru yayarken konik gradyan saat ibresi gibi döner. Bu tek fark, ondan pasta grafik, ilerleme halkası, renk tekerleği, dama tahtası ve dönen çerçeve parıltısı çıkarmayı mümkün kılar.

Sonuç bir görüntüdür, dolayısıyla background-image, border-image, mask-image ve list-style-image kabul eden her yerde kullanılabilir. Bu rehber sözdizimini, sert renk duraklarıyla dilim kesmeyi, halka hâline getirmeyi ve @property ile açı animasyonunu anlatıyor.

Sözdizimi: from, at ve renk durakları

Fonksiyon iki isteğe bağlı ayar ve bir renk durağı listesi alır. from <açı> gradyanın nereden başlayacağını belirler; varsayılan 0deg yukarıyı gösterir ve dönüş saat yönündedir. at <konum> merkezi kaydırır, tıpkı background-position gibi çalışır. Renk durakları açı (deg, turn, rad) ya da yüzde ile yazılır — 1turn tam turdur ve 360deg ile aynıdır.

Duraklar arasında varsayılan olarak yumuşak geçiş olur. Sert kenar istiyorsan aynı açıyı iki kez yazarsın: bir rengin bittiği ve bir sonrakinin başladığı nokta çakışınca geçiş bölgesi sıfırlanır ve keskin bir dilim sınırı oluşur. Pasta grafik, dama tahtası ve pizza dilimi bu numaradan ibarettir.

İlk ve son rengi aynı yapmak dikişi gizler. Renk tekerleğinde hsl(0 90% 60%) ile başlayıp hsl(360 90% 60%) ile bitirmek, tur tamamlandığında görünür bir çizgi kalmamasını sağlar.

cssSert duraklarla pasta grafik

.pasta {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0deg 140deg,      /* aynı açıda biten ve başlayan durak = keskin sınır */
    #0ea5e9 140deg 230deg,
    #1d4ed8 230deg 300deg,
    #1e293b 300deg 360deg
  );
}

cssfrom ve at ile başlangıç açısı ve merkez

.tekerlek {
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Kırmızıdan başlayıp tam tur dönen renk tekerleği */
  background: conic-gradient(
    from 0deg at 50% 50%,
    hsl(0 90% 60%), hsl(60 90% 60%), hsl(120 90% 60%),
    hsl(180 90% 60%), hsl(240 90% 60%), hsl(300 90% 60%),
    hsl(360 90% 60%)
  );
}

İlerleme halkası: gradyanı içinden oymak

Konik gradyan dolu bir daire üretir; halka hâline getirmek için ortasını oymak gerekir. İki pratik yöntem var. Birincisi ortaya ::before ile arka plan rengiyle aynı renkte küçük bir daire koymak — basit ama arka plan düz renk değilse çalışmaz. İkincisi mask ile radyal bir maske uygulamak: bu saydam zemin üzerinde de doğru çalışır ve gerçek bir delik açar.

İlerleme değerini yüzde olarak vermek istiyorsan tek bir sert durak yeterlidir: conic-gradient(#3b82f6 0 var(--ilerleme), #1e293b 0) yazmak, ilk rengi verilen orana kadar sürer ve kalanı ikinci renkle doldurur. Son duraktaki 0 değeri "önceki durağın bittiği yerden başla" anlamına gelir ve elle hesap yapmayı gereksiz kılar.

Halkanın kalınlığını maskede tanımlarsın. radial-gradient(farthest-side, transparent calc(100% - 12px), #000 0) maskesi, dıştan 12 piksel kalınlığında bir şerit bırakır; kalınlığı değiştirmek tek sayıyı değiştirmek demektir.

<div class="halka" style="--ilerleme: 68%">
  <span class="halka-deger">68%</span>
</div>

cssMaskeyle oyulmuş ilerleme halkası

.halka {
  --kalinlik: 12px;
  display: grid;
  place-items: center;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#3b82f6 0 var(--ilerleme), #1e293b 0);
  /* Ortayı gerçekten oyar — saydam zeminde de doğru görünür */
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--kalinlik)),
    #000 calc(100% - var(--kalinlik))
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--kalinlik)),
    #000 calc(100% - var(--kalinlik))
  );
}

.halka-deger {
  /* Maske üst elemanı kestiği için metin ayrı katmanda durmalı */
  position: absolute;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}

Dönen çerçeve: @property ile açı animasyonu

Konik gradyanın kendisi animasyonlanamaz — background-image değeri ara değer üretmez, geçiş anında sıçrar. İki çıkış yolu var. Basit olanı elemanı transform: rotate() ile döndürmek: gradyan sabit kalır, eleman döner. Bu çoğu dönen çerçeve efekti için yeterlidir ve compositor'da çalıştığı için ucuzdur.

İkincisi @property ile açıyı tipli bir özel değişken olarak kaydetmektir. Normal bir özel değişken tarayıcı için sadece metindir ve animasyonlanamaz; @property ile syntax: "<angle>" bildirdiğinde tarayıcı onu gerçek bir açı olarak görür ve iki değer arasında ara değer üretir. Böylece elemanı hiç döndürmeden gradyanın kendisi döner.

Dönen çerçeve kalıbında gradyan ::before katmanına konur, kabın overflow: hidden olması taşmayı engeller ve içerik ayrı bir katmanda gradyanın üstünde durur. Katmana elemandan büyük bir kare vermek (inset: -50%) köşelerde boşluk kalmamasını sağlar.

css@property ile gerçekten dönen konik çerçeve

@property --aci {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.doner-cerceve {
  position: relative;
  z-index: 0;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #0c1017;
  overflow: hidden;
}

.doner-cerceve::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: conic-gradient(
    from var(--aci),
    #3b82f6, #0ea5e9, #1d4ed8, #3b82f6
  );
  animation: don 4s linear infinite;
}

@keyframes don {
  to { --aci: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .doner-cerceve::before { animation: none; }
}

css@property yoksa: elemanı döndür, gradyanı sabit tut

@supports not (background: paint(x)) {
  .doner-cerceve::before {
    background: conic-gradient(#3b82f6, #0ea5e9, #1d4ed8, #3b82f6);
    inset: -50%;                 /* dönerken köşelerde boşluk kalmasın */
    animation: don-fiziksel 4s linear infinite;
  }
  @keyframes don-fiziksel {
    to { transform: rotate(1turn); }
  }
}

Tekrarlayan desenler ve performans

repeating-conic-gradient() aynı dilim dizisini tur boyunca tekrarlar. Dama tahtası, güneş ışını ve pasta dilimli yükleyici bunun tipik kullanımlarıdır. background-size ile birlikte kullanıldığında desen döşenir: 20 piksellik kutulara bölünmüş bir dama tahtası tek bildirimde çıkar.

Konik gradyan bir görüntü olduğu için tarayıcı onu raster hâline getirir. Büyük yüzeylerde (tam ekran arka plan) her yeniden boyama maliyetlidir; bu yüzden background-attachment: fixed ile birleştirmekten ve kaydırma sırasında yeniden boyanmasına yol açacak kurulumdan kaçın.

Renk bantlanması (banding) konik gradyanların bilinen sorunudur: yumuşak geçişli geniş bir gradyanda halkalar hâlinde çizgiler görünür. Çok ince bir gürültü katmanı eklemek ya da geçişi daha kısa açı aralığına sıkıştırmak bunu belirgin biçimde azaltır.

cssDama tahtası — tek bildirimde

.dama {
  background:
    repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%)
    0 0 / 24px 24px;
}

Katalogdan canlı örnekler

Aşağıdakiler conic-gradient() kullanan gerçek efektler — anlatılan teknik burada çalışır hâlde. Herhangi birine tıklayıp tam kaynağını açabilir, tarayıcı içi editörde değiştirip sonucu anında görebilirsin.

conic-gradient() kullanan 291 efektin tümü

Tarayıcı desteği

Sürüm numaraları özelliğin öneksiz ve varsayılan olarak açık hâle geldiği ilk kararlı sürümü gösterir.

Özellik	Tarayıcılar	Not
conic-gradient()	Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+	Öneksiz ve yaygın. Eski tarayıcıda bildirim geçersiz sayılır, önceki background değeri devreye girer.
repeating-conic-gradient()	Chrome 69+, Firefox 83+, Safari 12.1+	Desen döşemek için background-size ile birlikte kullanılır.
@property	Chrome 85+, Firefox 128+, Safari 16.4+	Özel değişkeni animasyonlanabilir kılar. Desteklenmediğinde animasyon çalışmaz ama gradyan doğru görünür.
mask ile halka oyma	Chrome 120+ (öneksiz), Firefox 53+, Safari 15.4+	Safari'nin eski sürümleri için -webkit-mask satırını da yazmak gerekir.

Yaygın hatalar

background-image geçişinin animasyonlanmaması
İki conic-gradient arasında transition yazmak işe yaramaz; değer sıçrar. Açıyı @property ile tiplendir ya da elemanı transform ile döndür.
Sert dilim sınırı yerine bulanık geçiş
İki durak arasında açı farkı varsa tarayıcı yumuşak geçiş üretir. Keskin sınır için bir rengin bitiş açısıyla sonrakinin başlangıç açısı tam olarak aynı olmalı.
Tur başlangıcında görünür dikiş
İlk ve son renk farklıysa 0deg noktasında sert bir çizgi belirir. Renk tekerleğinde son durağı ilk durakla aynı renkte kapat.
Halkanın ortasını düz renkle kapatmak
Merkeze arka plan renginde bir daire koymak yalnızca zemin düz renkse çalışır; gradyanlı ya da saydam zeminde yama gibi görünür. mask ile gerçekten oymak her durumda doğru sonuç verir.
Kare olmayan elemanda daire beklemek
conic-gradient elemanın kutusunu doldurur; dikdörtgen bir elemanda daire değil elips görünür. aspect-ratio: 1 ve border-radius: 50% ikilisini birlikte yaz.

Sıkça sorulan sorular

conic-gradient ile radial-gradient farkı nedir?: radial-gradient renkleri merkezden dışa doğru, yarıçap boyunca dağıtır — halka halka. conic-gradient ise renkleri merkez etrafında döndürerek dağıtır, yani açı boyunca. Pasta dilimi ve ilerleme halkası konik, ışık halesi ve nokta parlaması radyal gradyanla yapılır.
İlerleme halkasını JavaScript'siz güncelleyebilir miyim?: Değeri bir CSS değişkeninde tutarsan HTML tarafında style özniteliğiyle geçebilirsin: style="--ilerleme: 68%". CSS hiç değişmez, yalnızca değişkenin değeri sunucudan gelir. Dinamik güncelleme gerekiyorsa tek satır JavaScript ile aynı değişkeni yazman yeterli.
Neden gradyanımda halka halka çizgiler var?: Renk bantlanması. Tarayıcı geçişi 8 bit renk uzayında hesapladığı için çok yumuşak ve geniş geçişlerde ara tonlar yetmez. Geçiş aralığını daraltmak, ara duraklar eklemek veya çok düşük opaklıkta bir gürültü katmanı bindirmek etkiyi azaltır.
Konik gradyanı metne uygulayabilir miyim?: Evet. background-image olarak verip `background-clip: text` ve `color: transparent` yazarsan gradyan harflerin içinde görünür. Bu kalıp katalogdaki gradyanlı başlık efektlerinin temelidir; erişilebilirlik için okunur bir kontrast bırakmaya dikkat et.
from açısı hangi yönü gösterir?: 0deg yukarıyı (saat 12) gösterir ve dönüş saat yönündedir. 90deg sağa, 180deg aşağı, 270deg sola bakar. Negatif değer de yazılabilir; from -90deg, from 270deg ile aynı sonucu verir.

İlgili rehberler

Son güncelleme: 20 Temmuz 2026

Tüm rehberler