CSS Gradyan Oluşturucu (doğrusal, radyal, konik)
Bir gradyan türü seçin, açıyı ayarlayın, konumlarıyla renk durağı ekleyin veya kaldırın. Canlı önizleme. Bir tıklamayla CSS arka plan bildirimini kopyalayın.
Renk durağı
- 0%
- 100%
Nasıl çalışır
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.
Sık sorulan sorular
›Gradyanlar eski tarayıcılarda destekleniyor mu?
Doğrusal ve radyal gradyanlar Edge, Firefox, Chrome, Safari dahil tüm modern tarayıcılarda çalışır (2014'ten itibaren). Konik gradyanlar Chrome 69+, Firefox 83+, Safari 12.1+ gerektirir — eski tarayıcılar için doğrusal'a geri dönün.
›Bunları React Native veya mobil uygulamalarda kullanabilir miyim?
Web CSS gradyanları React Native'e doğrudan çevrilmez — `react-native-linear-gradient` gibi kütüphaneler kullanın. Renk durağı değerleri aktarılır ama sözdizimi farklıdır. iOS ve Android arayüzleri platforma özgü API'ler kullanır.
›Adlandırılmış renkler kullanabilir miyim?
Evet. Renk seçicinin yanındaki metin girişinde herhangi bir hex kodu (örn. #ff0000) yerine CSS renk adını (red, dodgerblue, vb.) yazın.
›Konik gradyanım neden garip görünüyor?
Konik gradyanlar ayarladığınız açıdan saat yönünde döner. Tam 360° dönüşü kapsayan birden fazla durağıyla en iyi görünürler. Yalnızca 2 durağıyla genellikle eksik görünürler.
›'Parıltı' efekti nasıl oluştururum?
Tamamen şeffaf son durağı olan radyal gradyan kullanın: örn. 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.
›Gradyanı canlandırabilir miyim?
CSS gradyan duraklarını doğrudan canlandırmaz, ancak hareket efekti için background-position'ı canlandırabilir veya CSS özel özelliklerini (değişkenleri) JavaScript ile güncelleyebilirsiniz.
›CSS neden bu kadar uzun?
Her durak bir renk ve konum ekler. Çok sayıda durağa sahip uzun gradyanlar ayrıntılı CSS üretir. Daha basit sonuçlar için 2-3 durağa bağlı kalın.
›Veriler tarayıcımdan çıkıyor mu?
Hayır. Her şey yerel olarak hesaplanır; hiçbir şey sunucuya gönderilmez.
İlgili araçlar
Son güncelleme: