Gradient, iki ya da daha fazla renk arasındaki geçişi hesaplayan bir CSS fonksiyonudur. Raster görüntü değildir; tarayıcı her render döngüsünde piksel değerlerini aritmetik yolla üretir. Bu fark, gradient'ı hem sıfır HTTP isteği avantajı sağlayan hem de yanlış kullanıldığında render bütçesini tüketen çift yönlü bir araç haline getirir.
CSS'te üç temel gradient fonksiyonu vardır: linear-gradient(), radial-gradient() ve conic-gradient(). Her biri farklı bir koordinat sisteminde çalışır; sözdizimi yüzeysel benzerliklerine karşın birbirinin yerine kullanılamaz.
CSS gradient'ın üç türü
linear-gradient(), renk geçişini düz bir eksen boyunca üretir. Yatay, dikey ya da açısal yönlerde çalışır ve en yaygın kullanılan gradient türüdür. radial-gradient(), merkezi bir noktadan dışa doğru dairesel ya da eliptik geçiş üretir; ışıma efektleri ve vignette uygulamalarında tercih edilir. conic-gradient() ise renkleri merkez etrafında döndürerek açısal geçiş üretir; pasta grafiği görselleştirmesi ve döngüsel ilerleme göstergelerinde işe yarar.
Her üç fonksiyon da background-image özelliğinin değeri olarak atanır; background-color değil. Bu ayrım, gradient ile düz renk birleştirmeyi doğrudan etkiler: gradient her zaman background-color'ın üzerinde katmanlanır, solid renk ise fallback olarak çalışır. Tarayıcı gradient'ı desteklemediğinde ya da başarısız parse ettiğinde background-color devreye girer.
Repeating varyantları da mevcuttur: repeating-linear-gradient(), repeating-radial-gradient() ve repeating-conic-gradient(). Belirlenmiş renk bloğunu döşeme mantığıyla tekrarlayarak örüntü oluştururlar; çizgili arka planlar ve zebra efektleri için uygundur. Repeating gradient'lar için color stop konumlarını açıkça belirtmek zorunludur; aksi hâlde tarayıcı tekrar noktasını hesaplayamaz ve gradient sonsuz tek renge dönüşür.
linear-gradient sözdizimi: angle, direction ve color stop
Temel sözdizimi şöyledir:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);Direction parametresi iki biçimde yazılır: anahtar kelime ya da açı değeri. Anahtar kelimeler to top, to right, to bottom right gibi yönleri ifade eder. Açı değerleri derece cinsinden yazılır; 0deg tam yukarı, 90deg sağa, 180deg aşağıya karşılık gelir. 45deg ile to top right aynı değildir: to top right açısı kutunun en-boy oranına göre dinamik hesaplanır, 45deg her kutu için sabittir. Kare olmayan elementlerde bu fark gözle görülür.
Color stop, gradient boyunca rengin konumunu belirtir. Konum belirtilmezse tarayıcı renkleri eşit aralıklarla dağıtır. Konum yüzde ya da piksel cinsinden yazılabilir:
background-image: linear-gradient(to right, #b8f0ef 0%, #e0d4fc 50%, #ffd6b8 100%);Piksel değeri kullanmak, gradient'ı element boyutundan bağımsız sabit bir konuma kilitler. Bu özellikle sabit boyutlu UI elementlerinde tutarlı görünüm için kullanışlıdır; ancak fluid layout'larda yüzde değerleri daha güvenilir sonuç verir.
Hard stop, iki color stop'u aynı konuma yazarak ani geçiş elde eder:
background-image: linear-gradient(to right, #b8f0ef 50%, #e0d4fc 50%);Hard stop basit görünür. Çoğu tutorial atlar. Anti-aliasing devreye girmediğinden piksel hizasındaki kaymalar yüksek DPI ekranlarda ince bir tırtıklı kenar olarak ortaya çıkar; sorunu gidermek için %50 yerine %49.9 ve %50.1 kullanmak tarayıcıya geçiş için küçük bir bölge bırakır. Bu fark 2x ve 3x Retina ekranlarda özellikle belirginleşir. CSS minification sürecinde bu ondalıklı değerlerin yuvarlanmaması gerekir; CSS kodunu sıkıştırırken minifier'ın sayısal hassasiyet ayarını kontrol edin.
Birden fazla color stop kullanmak mümkündür; CSS herhangi bir üst sınır koymaz. Beşin üzerindeki color stop sayısı render süresini artırır; profil almadan bu değeri yükseltmemelisiniz.
Radial ve conic: hangi durumda hangisi?
radial-gradient() sözdiziminde shape ve size parametreleri belirleyicidir:
background-image: radial-gradient(shape size at position, color-stop1, color-stop2);Shape değerleri circle ve ellipse'tir. Varsayılan ellipse'tir; kutunun en-boy oranına göre şekil otomatik ayarlanır. Tam dairesel gradient için circle açıkça belirtilmelidir. Size parametresi dört seçenek sunar: closest-side, farthest-side, closest-corner, farthest-corner.
Varsayılan değer önemlidir. Çoğu geliştirici fark etmez. farthest-corner varsayılan olarak seçilir ve gradient'ın merkez noktasından en uzak köşeye kadar uzandığını garanti eder; bu seçim kutunun tamamının renk geçişiyle kaplandığı anlamına gelir, ancak küçük bir merkez noktasında geniş bir gradient geçişi oluşturulduğunda renk bantları belirgin biçimde sıkışır ve beklenen görsel efekti vermez.
Position parametresi gradient merkezini konumlandırır: at center, at top left ya da at 30% 70% gibi koordinat alır. Merkezi köşeye yakın konumlandırmak, vignette efektleri için kullanılan yaygın bir tekniktir.
conic-gradient(), CSS Images Level 4 spesifikasyonunda tanımlandı; 2020 sonrasında tüm büyük tarayıcıların kararlı sürümlerinde destekleniyor. Temel sözdizimi:
background-image: conic-gradient(from 0deg at center, #b8f0ef 0deg 120deg, #e0d4fc 120deg 240deg, #ffd6b8 240deg 360deg);Bu tanım, üç eşit dilimli bir renk tekerleği üretir. Pasta grafiği oluşturmak için clip-path ya da border-radius gerektirmez; conic-gradient tek başına yeterlidir. İlerleme göstergelerinde ise from açısını CSS custom property aracılığıyla JavaScript ile dinamik güncellemek mümkündür; transition ile birleştiğinde saf CSS animasyonuna göre daha ince kontrol sağlar.
Gradient ve tarayıcı render maliyeti
Gradient, statik bir görüntü değildir; tarayıcı her layout değişikliğinde gradient piksellerini yeniden hesaplar. Sabit boyutlu bir elementte bu maliyet ihmal edilebilir düzeydedir. Ancak belirli kombinasyonlarda render bütçesi ciddi biçimde etkilenebilir.
En sık karşılaşılan sorun, background-attachment: fixed ile gradient birleşimidir. Fixed attachment, gradient'ın viewport koordinatına göre hesaplanmasını gerektirir; scroll sırasında her kare için yeniden boya tetiklenir. Bu durum Chromium tabanlı tarayıcılarda compositing katmanı oluşturmaz, GPU hızlandırmasından yararlanamaz ve CPU-bound bir boya döngüsüne yol açar.
GPU bellek doldu; frame drop başladı. will-change: transform ya da transform: translateZ(0) ile elementi kendi compositing katmanına taşımak bu sorunu çözer; ancak aşırı katman sayısı GPU belleğini tüketeceğinden yalnızca animasyon ya da scroll etkileşimi olan gradient arka planlarına uygulamak gerekir, aksi hâlde tarayıcı katmanları birleştirmek için ek kaynak harcar ve toplamda daha yüksek bellek tüketimine yol açılır.
Birden fazla gradient katmanını virgülle ayırarak background-image'e yüklemek mümkündür:
background-image:
linear-gradient(to bottom, rgba(184,240,239,0.4), transparent),
radial-gradient(ellipse at top right, rgba(224,212,252,0.5), transparent);Bu teknik HTTP isteği üretmeden karmaşık arka planlar oluşturur. Katman sayısı arttıkça paint maliyeti orantılı artar; animasyon ya da sık yeniden boyama gerekmiyorsa üç katmanın üzerine çıkmamak genel bir kılavuz olarak kullanılabilir.
radial-gradient için merkez konumu değiştirilirken :hover veya JavaScript event'leriyle tetiklenen anlık değişiklikler repaint döngüsü başlatır. CSS transition eklense de her frame'de gradient piksel değerleri yeniden hesaplandığından karmaşık radial geçişlerde görünür yavaşlama ortaya çıkabilir; bu durumlarda gradient yerine SVG ya da Canvas tercih etmek render mimarisi açısından daha uygun bir seçim olur. Hangi gradient kombinasyonunun sayfa yükleme süresini etkilediğini görmek için sayfanızın performans değerlerini analiz etmek faydalı bir başlangıç noktası sunar.
CSS custom properties ile gradient paleti
Projenin renk paletini :root düzeyinde custom property olarak tanımlamak, gradient değerlerini merkezi bir noktadan yönetmeyi sağlar:
:root {
--renk-mint: #b8f0ef;
--renk-lavender: #e0d4fc;
--renk-peach: #ffd6b8;
--renk-lemon: #f8f0b8;
}
.kart-basligi {
background-image: linear-gradient(135deg, var(--renk-mint), var(--renk-lavender));
}Dark mode entegrasyonu için @media (prefers-color-scheme: dark) bloğunda aynı custom property'leri yeniden tanımlamak yeterlidir; gradient sözdizimini tekrar yazmak gerekmez:
@media (prefers-color-scheme: dark) {
:root {
--renk-mint: #1a4a49;
--renk-lavender: #2d2342;
}
}Bu yaklaşımın kritik avantajı, component başına dark mode override yazmak yerine tek bir noktadan renk sistemini kontrol etmesidir. CSS dosyası büyüdükçe bu fark bakım maliyetini doğrudan etkiler.
Gradient renk değerlerini belirlerken kontrast oranı hesabı sıkça atlanır. WCAG 2.1 AA standardı, normal metin için 4.5:1, büyük metin için 3:1 minimum kontrast oranı gerektirir. Gradient arka planlarda kontrast sabit değildir; gradient başından sonuna kayan bir değer alır. Bu nedenle metin içeren gradient arka planlarda kontrastın en düşük noktasını başlangıç ve bitiş renklerinin her ikisine karşı ayrı ayrı ölçmek gerekir. Renk değerlerini HEX ile girerken kontrast hesabı için HSL ya da LCH dönüşümüne ihtiyaç duyulabilir; renk formatları arasında dönüştürme yaparken tüm değerleri aynı modelde tutmak hesaplama tutarlılığını artırır.
CSS Color Level 4 ile birlikte oklch() ve color-mix() fonksiyonları gradient bağlamında yeni seçenekler sunuyor. oklch() fonksiyonu algısal düzgünlük sağlar; iki renk arasındaki geçiş gri bir bant oluşturmadan doğal görünür. color-mix(in oklch, renk1 50%, renk2) ise custom property sistemine dokunmadan ara tonları dinamik üretir. Her iki özellik de güncel tarayıcılarda destekleniyor; ancak eski tarayıcı desteği gerekiyorsa @supports ile fallback tanımlamak zorunludur.
Gradient'ı yalnızca bir arka plan aracı olarak görmek, potansiyelin bir kısmını kullanmak demektir. background-clip: text ile gradient'ı doğrudan metin piksellerine uygulamak mümkündür; -webkit-background-clip: text prefix'i hâlâ gereklidir. Dekoratif başlıklar için işe yarar, ancak metin okunabilirliğini düşürme riski taşır. Kontrast oranı bu durumda sabit bir değere kilitlenebilir olmaktan çıkar; metnin her harfi gradient'ın farklı bir noktasına denk gelir ve bu okunabilirlik sorununu ölçmek için manuel piksel örnekleme ya da özelleştirilmiş araç gerektirir.