CSS gradyanı nedir?
Gradyan, CSS'te bir renk değil bir görseldir. Bu yüzden background-color ile değil, background-image (ya da kısayol olarak background) ile verilir. Tarayıcı iki durak arasındaki ara renkleri kendisi hesaplar; siz yalnızca durakların rengini ve kaçıncı yüzdede olduğunu söylersiniz. Aynı özelliğe virgülle birden fazla gradyan yazabilirsiniz: üstteki katman altta kalanı kapatır, saydam duraklarla katmanlar iç içe geçirilir.
Açı ve tür arasındaki fark
linear-gradient açısı saat yönündedir ve 0deg yukarı, 90deg sağa bakar; yani to right ile 90deg aynı şeydir. radial-gradient merkezden dışarı doğru yayılır, circle her yönde eşit, ellipse kutunun oranına uyar. conic-gradient ise renkleri merkez etrafında döndürür; pasta grafikleri, renk çarkları ve konik parlama efektleri bununla yapılır. Aynı yüzdeye iki durak koyarsanız geçiş yumuşamaz, keskin bir çizgi oluşur — çizgili ve damalı desenler bu numarayla üretilir.
Sık yapılan hatalar
En yaygın sorun, bir rengi transparent anahtar sözcüğüne bağlamaktır: transparent aslında rgba(0, 0, 0, 0) demektir ve geçişin ortası kirli griye döner. Bunun yerine aynı rengin saydamı yazılır, örneğin rgba(59, 130, 246, 0). İkinci sık hata, gradyanı transition ile canlandırmaya çalışmaktır; gradyanlar varsayılan olarak animasyonlanamaz, bunun yerine background-size büyütülüp background-position kaydırılır. Zıt renkler arasında ölü bir gri bölge oluşuyorsa araya bir ara durak eklemek çoğu zaman yeterlidir.
Buradaki üç gradyan türü de yıllardır tüm güncel tarayıcılarda çalışır; conic-gradient için Safari 12.1 ve üstü gerekir. Hazır arka plan örnekleri arıyorsanız cam efekti üreticisine ve efekt kütüphanesindeki arka plan kategorisine de bakabilirsiniz.