CSS Gradyan Oluşturucu (doğrusal, radyal, konik)

CSS'de üç gradyan türü

Doğrusal gradyan: renkler belirli bir açıyla düz bir çizgi boyunca geçiş yapar. 0° yukarı bakar, 90° sağa bakar (varsayılan okuma yönü), 180° aşağı bakar. Arka planlar, düğmeler ve hero bölümleri için en yaygın kullanılan türdür.

Radyal gradyan: renkler bir merkez noktasından dışarı doğru geçiş yapar. Şekil bir daire (varsayılanımız) veya elips olabilir. Spot ışığı efektleri, güneş benzeri öğeler veya dikkat çekici odak parçaları için en uygun seçenektir.

Konik gradyan: renkler bir renk çarkı gibi merkez noktası etrafında döner. Daha az yaygın ama pasta grafikleri, saat yüzleri veya dekoratif döndürücüler için güçlüdür. 2020'den itibaren modern tarayıcılarda desteklenmektedir.

Renk durağı ve yüzde sistemi

Her renk durağının bir rengi ve %0'dan %100'e kadar bir konumu vardır. %0 gradyanın başlangıcı, %100 ise sonudur. İki durak akıcı iki renkli bir gradyan oluşturur. Ortaya üçüncü bir durak eklemek, konumlandırmaya bağlı olarak üç renkli bir karışım veya keskin bir bant oluşturur.

Keskin geçişler için (karışım olmadan) aynı konuma farklı renklerle iki durak koyun. Örneğin '#000 %50, #fff %50' orta noktada keskin bir siyah-beyaz bölünme oluşturur. 'Çizgili' arka planlar bu şekilde yapılır.

Performans ve erişilebilirlik ipuçları

Gradyanlar, arka plan görsellerinden farklı olarak HTTP isteği olmaksızın yerel olarak işlenir. Kalite kaybı olmadan sonsuza kadar ölçeklenir. Animasyon dostudur: background-position aracılığıyla konumu geçiş yapın veya gradyan duraklarını özel özelliklerle (CSS custom properties) canlandırın.

Erişilebilirlik: gradyan boyunca kontrast değişiyorsa metni doğrudan karmaşık gradyanın üzerine koymayın. Düz bir renk katmanı kullanın, gradyanın ortalama parlaklığının metinle kontrast oluşturduğundan emin olun veya kontrast denetleyicimizle test edin. WCAG AA, normal metin için 4,5:1, büyük metin için 3:1 gerektirir.