Gradient, iki veya daha fazla renk arasında yumuşak geçiş oluşturur. Linear gradient (doğrusal) ve radial gradient (dairesel) olmak üzere iki tiptir. Modern web tasarımında yaygın olarak kullanılır.
Gradient Önizleme
CSS Kodu:
Sık Sorulan Sorular
Linear ve radial gradient farkı nedir?
Linear gradient düz bir çizgi boyunca renk geçişi oluşturur (yatay, dikey veya çapraz). Radial gradient ise merkezi bir noktadan dışarıya doğru dairesel renk geçişi oluşturur. Linear gradient daha yaygın kullanılır.
Gradient birden fazla renk içerebilir mi?
Evet! CSS gradient'ler sınırsız sayıda renk içerebilir. Örnek: linear-gradient(to right, red, yellow, green, blue). Her rengin konumunu yüzde ile belirtebilirsiniz. Örnek: linear-gradient(to right, red 0%, blue 100%)
Gradient arka plan olarak nasıl kullanılır?
CSS'te background veya background-image özelliğine gradient kodunu ekleyin. Örnek: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Gradient'i metin üzerine de uygulayabilirsiniz.
Tüm tarayıcılar gradient'i destekliyor mu?
Evet, modern tüm tarayıcılar (Chrome, Firefox, Safari, Edge) CSS gradient'leri destekler. Çok eski IE versiyonları için fallback color (yedek renk) kullanmanız önerilir. Örnek: background: #667eea; background: linear-gradient(...);
Gradient animasyonu yapılabilir mi?
CSS ile doğrudan gradient animasyonu yapılamaz, ancak pseudo-element veya background-position ile hareket illüzyonu oluşturabilirsiniz. Alternatif olarak JavaScript ile renkleri değiştirerek animasyon yapabilirsiniz.