CSS Gradient Rehberi: Linear, Radial ve Conic

CSS gradientleri (renk geçişleri), iki veya daha fazla renk arasında yumuşak geçişler oluşturmanızı sağlayan güçlü bir CSS özelliğidir. Görsel olarak çekici arka planlar, düğmeler ve kartlar oluşturmak için ek görsel dosyalarına ihtiyaç duymadan kullanılabilirler. Bu rehberde üç temel gradient türünü detaylı olarak inceleyeceğiz.

Linear Gradient: Doğrusal Renk Geçişi

linear-gradient(), renklerin bir doğru boyunca geçiş yapmasını sağlar. En yaygın kullanılan gradient türüdür.

/* Yukarıdan aşağıya (varsayılan) */
background: linear-gradient(#3498db, #2ecc71);

/* Yön belirterek */
background: linear-gradient(to right, #3498db, #2ecc71);
background: linear-gradient(to bottom right, #e74c3c, #f39c12);

/* Açı ile yön belirtme */
background: linear-gradient(45deg, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);

Açı değerleri saat yönünde çalışır: 0deg yukarı, 90deg sağa, 180deg aşağı (varsayılan) ve 270deg sola doğru geçiş yapar.

Renk Duraklarını (Color Stops) Kontrol Etme

Renk duraklarını yüzde veya piksel değerleriyle belirleyerek geçişin nerede başlayıp biteceğini hassas şekilde kontrol edebilirsiniz:

/* Renk duraklarını yüzde ile belirleme */
background: linear-gradient(to right, #3498db 0%, #2ecc71 50%, #f39c12 100%);

/* Sert geçiş (geçiş yok) */
background: linear-gradient(to right, #3498db 50%, #2ecc71 50%);

/* Üç renkli gradient */
background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 50%, #ffecd2 100%);

Aynı pozisyonda iki farklı renk tanımlayarak sert geçişler (hard stops) oluşturabilirsiniz. Bu teknik, çizgili desenler veya bayrak efektleri için kullanışlıdır.

Radial Gradient: Dairesel Renk Geçişi

radial-gradient(), merkezden dışa doğru yayılan dairesel veya eliptik renk geçişleri oluşturur:

/* Varsayılan: merkezden eliptik yayılma */
background: radial-gradient(#3498db, #2c3e50);

/* Daire şeklinde */
background: radial-gradient(circle, #3498db, #2c3e50);

/* Merkez pozisyonunu değiştirme */
background: radial-gradient(circle at top left, #667eea, #764ba2);
background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c);

/* Boyut belirleme */
background: radial-gradient(circle closest-side, #3498db, #2c3e50);
background: radial-gradient(circle farthest-corner, #3498db, #2c3e50);

Boyut anahtar kelimeleri: closest-side, closest-corner, farthest-side ve farthest-corner (varsayılan) gradyanın ne kadar büyük olacağını belirler.

Conic Gradient: Konik Renk Geçişi

conic-gradient(), bir merkez noktası etrafında dönerek renk geçişi oluşturur. Pasta grafikleri, renk çarkları ve benzeri efektler için idealdir:

/* Basit konik gradient */
background: conic-gradient(#3498db, #2ecc71, #f39c12, #e74c3c, #3498db);

/* Başlangıç açısı belirtme */
background: conic-gradient(from 45deg, #3498db, #2ecc71, #3498db);

/* Pasta grafiği efekti */
background: conic-gradient(
  #3498db 0deg 120deg,
  #2ecc71 120deg 240deg,
  #f39c12 240deg 360deg
);

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

Conic gradient, diğer türlere göre daha yeni bir özelliktir ancak modern tarayıcılarda geniş bir destek sunmaktadır.

Tekrarlayan Gradientler

Gradient desenleri oluşturmak için tekrarlayan versiyonları kullanabilirsiniz:

/* Tekrarlayan çizgili desen */
background: repeating-linear-gradient(
  45deg,
  #3498db 0px 10px,
  #2c3e50 10px 20px
);

/* Tekrarlayan dairesel desen */
background: repeating-radial-gradient(
  circle at center,
  #3498db 0px 10px,
  transparent 10px 20px
);

Gradient Kullanım Alanları

• Arka planlar: Sayfa veya bölüm arka planlarında monoton renklere alternatif
• Düğmeler: Gradientli düğmeler daha profesyonel ve çekici görünür
• Metin efektleri: background-clip: text ile gradientli metin oluşturulabilir
• Kenarlıklar: border-image ile gradientli kenarlıklar
• Gölge efektleri: Gradientler ile doğal görünümlü gölgeler

Performans İpuçları

CSS gradientleri genellikle performans açısından iyi olsa da dikkat edilmesi gereken noktalar vardır:

• Gradientler görsel dosya gerektirmediği için HTTP isteklerini azaltır
• Çok fazla renk durağı performansı olumsuz etkileyebilir
• Animasyonlu gradientler GPU yükünü artırabilir — dikkatli kullanın
• Eski tarayıcılar için fallback renk tanımlayın

Gradient Oluşturucuyu Deneyin

Gradient kodlarını elle yazmak yerine, Gradient Generator aracımız ile görsel arayüz üzerinden istediğiniz renk geçişini kolayca oluşturun. Renkleri, yönü ve duraklarını ayarlayın, canlı önizlemeyi görün ve hazır CSS kodunu kopyalayın.