Linear, Radial ve Conic Gradient Farkları

CSS'de üç gradient türü vardır ve her biri farklı görsel sonuçlar üretir. Doğru türü seçmek tasarım hedefinize ve istenen etkiye bağlıdır. Bu rehberde her türün sözdizimi, kullanım alanları ve tarayıcı desteğini inceliyoruz.

Linear gradient en yaygın kullanılan türdür; düz çizgiler boyunca geçiş yapar. Radial gradient ışık kaynağı veya merkez odaklı efektler için idealdir. Conic gradient ise renkli çarklar ve açısal geçişler için mükemmeldir.

Linear Gradient (Doğrusal Gradient)

Linear gradient renkleri düz bir çizgi boyunca geçirir. Yön açı (deg) veya anahtar kelimelerle (to top, to right, to bottom right) belirlenir. Varsayılan yön 180deg yani yukarıdan aşağıdır.

/* Soldan sağa */
background: linear-gradient(to right, #667eea, #764ba2);

/* 135 derece açı ile */
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Birden fazla renk durağı */
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);

Linear gradient butonlar, header arka planları ve bölüm geçişlerinde sıkça kullanılır. En iyi tarayıcı desteğine sahiptir.

Radial Gradient (Işınsal Gradient)

Radial gradient merkezden dışa doğru daire veya elips şeklinde yayılır. Merkez konumu, boyut (circle, ellipse) ve renk durakları tanımlanabilir. Spot ışık veya güneş efektleri için idealdir.

/* Basit radial */
background: radial-gradient(circle, #ffecd2, #fcb69f);

/* Merkez konumu */
background: radial-gradient(circle at 30% 70%, #a8edea, #fed6e3);

/* Elips */
background: radial-gradient(ellipse at top, #1a1a2e, #16213e);

Radial gradient arka planlarda derinlik hissi verir. Koyu kenarlardan merkeze doğru açılan gradientler gözü merkeze odaklar. Avatar veya logo çerçevelerinde de kullanılır.

Conic Gradient (Konik Gradient)

Conic gradient merkez etrafında saat yönünde açısal geçiş yapar. Renkler açı (deg) ile konumlandırılır. Pasta grafikleri, renk çarkları ve dikkat çekici arka planlar için uygundur.

/* Renk çarkı */
background: conic-gradient(
  red, yellow, lime, aqua, blue, magenta, red
);

/* Merkez konumu */
background: conic-gradient(from 90deg at 50% 50%, #667eea, #764ba2);

Conic gradient nispeten yenidir; Internet Explorer desteklemez. Ancak Chrome, Firefox, Safari ve Edge'de tam çalışır.

Ne Zaman Hangisini Kullanmalı?

Linear: Yatay veya dikey geçişler, butonlar, hero bölümleri, sayfa geçişleri. En çok yön veren, tahmin edilebilir sonuçlar için.

Radial: Merkez odaklı efektler, spot ışığı, güneş/ay, avatar vurguları. Derinlik ve odak hissi gerektiğinde.

Conic: Pasta grafikleri, renk seçiciler, dönen efektler, dikkat çekici arka planlar. Açısal veya dairesel tasarım öğeleri için.

Tarayıcı Desteği Özeti

Linear ve radial gradient tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) desteklenir. Conic gradient IE'de yok; eski tarayıcılar için @supports ile fallback tanımlanabilir.

İlgili rehberler: CSS Gradient Nedir? · Renk Uyumu · Gradient Oluşturucu · Marka Renkleri