Türkçe teknik metinlerde CSS gradyanları için iki farklı kelime bir arada dolaşır: fizik ve matematik kökenli "gradyan" ile tasarım camiasının tercih ettiği "geçiş" — ikisi de aynı CSS özelliğini karşılasa da, kaynağa göre hangisinin kullanıldığı değişir.
Üç farklı renk yayılma biçimi
linear-gradient(45deg, red, blue) rengi belirli bir açıda düz bir çizgi boyunca gerer — düğme, banner ve kart arka planlarında en sık kullanılan tür. radial-gradient(circle, yellow, orange) rengi bir noktadan dışarıya doğru eş merkezli çemberler halinde yayar, ışık lekesi efekti için uygundur. conic-gradient(red, yellow, green, blue, red) rengi saat ibresi gibi bir merkez nokta etrafında döndürür ve ek grafik olmadan pasta grafiği veya halka şeklinde ilerleme göstergesi oluşturabilen tek türdür.
Renk durakları ve tekrarlanan desenler
Her renk, linear-gradient(red 0%, yellow 50%, blue 100%) örneğindeki gibi belirli bir yüzde konumuna sabitlenebilir ve geçişin ne kadar keskin olacağı kontrol edilebilir. repeating-linear-gradient() ve repeating-radial-gradient() fonksiyonları aynı durak dizisini otomatik olarak tekrarlayarak tek bir CSS satırıyla çizgili veya dama tahtası desenleri oluşturur.
Neden gerekli
- Açıları ve renkleri elle ayarlamadan hazır CSS gradyan kodunu hızlıca seçip kopyalamak.
- Belirli bir görsel efekt için hangi gradyan türünün uygun olduğunu anlamak.
- İstenilen geçiş için renk duraklarının konumlarını hassas şekilde ayarlamak.
Düz tasarımdan gradyanın dönüşüne
2013'te iOS 7 ile birlikte yaygınlaşan düz (flat) tasarım akımının ardından, gradyan birkaç yıl içinde arayüz tasarımına güçlü bir şekilde geri döndü: Instagram'ın 2016'daki marka yenilemesi, eski kamera simgesini turuncu-mor bir gradyan logoyla değiştirdi ve bu görsel dil, sonraki yıllarda pek çok girişimin logosunu ve açılış sayfası tasarımını etkiledi.