CSS Gradyan Oluşturucu: Linear, Radial, Conic

CSS Gradyan Oluşturucu

CSS gradyanları, görüntü dosyalarına ihtiyaç duymadan pürüzsüz renk geçişleri oluşturmanızı sağlar. Tarayıcı, bunları linear-gradient(), radial-gradient() ve conic-gradient() fonksiyonlarını kullanarak arka plan olarak render eder. Bu araç, renkleri, açıları ve durak konumlarını ayarlarken sonucu görebilmeniz için CSS’yi görsel olarak oluşturur.

Nasıl Kullanılır

1. Bir gradyan türü seçin. Yönsel karışımlar için linear, dairesel solmalar için radial, açısal taramalar için conic
2. Renk durakları ekleyin ve ayarlayın. Renk seçiciye tıklayarak bir renk seçin, kaydırıcıyı sürükleyerek gradyandaki konumunu belirleyin
3. Yönü ayarlayın. Linear gradyanlar için açı kadranını veya ok butonlarını kullanın. Radial ve conic için X/Y kaydırıcıları ile merkez konumunu ayarlayın
4. İlham için bir hazır ayar deneyin. Herhangi bir hazır ayar küçük resmine tıklayarak renklerini ve ayarlarını başlangıç noktası olarak yükleyin
5. CSS’yi kopyalayın. Kopyala butonuna tıklayın veya Cmd+C tuşlayarak background özelliğini panonuza kopyalayın

CSS Gradyanları Nasıl Çalışır?

Bir CSS gradyanı teknik olarak bir renk değil, bir görüntüdür. background kısa el yazımı bunu kabul eder çünkü background-image, kısa el yazımının bir parçasıdır. Bu, aynı öğede birden çok gradyanı virgülle ayırarak katmanlayabileceğiniz ve gradyanları görüntü kabul edilen her yerde kullanabileceğiniz anlamına gelir: border-image, list-style-image, hatta mask-image.

Tarayıcı, gradyanı bir “gradyan çizgisi” (linear), bir “gradyan ışını” (radial) veya bir “gradyan yayı” (conic) oluşturarak hesaplar. Renk durakları, bu çizgi boyunca belirli noktalardaki renkleri tanımlar. Duraklar arasında tarayıcı varsayılan olarak sRGB renk uzayında enterpolasyon yapar. CSS Color Level 4, daha algısal olarak tek tip karışımlar için in oklab ve in oklch enterpolasyonunu tanıtır ancak tarayıcı desteği henüz tam olarak yaygınlaşmamıştır.

Durak konumları isteğe bağlıdır. Bunları atlarsanız tarayıcı durakları eşit olarak dağıtır. Yalnızca bazı konumları belirtirseniz tarayıcı boşlukları doldurur. Aynı konumdaki iki durak sert bir kenar oluşturur; bu, repeating-linear-gradient ile çizgiler oluşturmak için kullanışlıdır.

Performans

Gradyanların render edilmesi ucuzdur. Tarayıcı, bunları bir kez rasterleştirir ve öğe yeniden boyutlanana kadar sonucu önbelleğe alır. Bir görüntü dosyası yüklemekten önemli ölçüde daha hızlıdırlar, sıfır ağ maliyeti vardır ve her çözünürlüğe mükemmel ölçeklenirler. Basit arka planlar için gradyanlar neredeyse her zaman görüntülerden daha iyi bir seçimdir.

Bir SVG data URI’sinde veya sorgu parametresinde kullanmak üzere bir gradyan değerini URL kodlamanız mı gerekiyor? URL Kodlayıcı yüzde kodlamasını halleder.