CSS gradient, iki veya daha fazla rengin yumuşak geçişlerle birleştiği arka plan efektidir. Web tasarımında butonlardan hero bölümlerine, kartlardan arka planlara kadar sayısız alanda kullanılır. Düz renkler yerine gradient kullanmak tasarıma derinlik ve modern bir görünüm kazandırır.
Gradientler background veya background-image özelliği ile uygulanır. Tek bir CSS satırı ile karmaşık görsel efektler elde edebilirsiniz. Görüntü dosyasına ihtiyaç duymadan, performanslı ve ölçeklenebilir çözümler sunar.
CSS Gradient Tarihçesi ve Tarayıcı Desteği
Linear gradient ilk kez WebKit (Safari) tarafından -webkit-gradient ile tanıtıldı. Daha sonra Mozilla -moz-linear-gradient gibi önekli sözdizimleri kullandı. Modern tarayıcılar artık öneksiz standart sözdizimini destekliyor.
Chrome, Firefox, Safari ve Edge gibi tüm modern tarayıcılar linear ve radial gradientleri tam destekler. Conic gradient nispeten yenidir; IE desteklemez ancak tüm güncel tarayıcılarda çalışır. Can I Use verilerine göre linear-gradient %97+ tarayıcı desteğine sahiptir.
Gradient Türlerine Genel Bakış
CSS'de üç ana gradient türü vardır: linear, radial ve conic. Her biri farklı görsel efektler üretir.
- Linear gradient: Renkler düz bir çizgi boyunca geçiş yapar. En sık kullanılan türdür.
- Radial gradient: Merkezden dışa doğru daire veya elips şeklinde yayılır.
- Conic gradient: Merkez etrafında açısal (saat yönünde) geçiş yapar.
Temel Sözdizimi
Linear gradient en basit formunda iki renk alır. Yön belirtilmezse varsayılan olarak yukarıdan aşağıya (180deg) geçiş yapar.
.box {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
Açı ile yön belirtebilirsiniz: linear-gradient(90deg, red, blue) soldan sağa geçiş yapar. Yüzde veya piksel ile renk duraklarının konumunu da ayarlayabilirsiniz.
Kullanım Alanları
Gradientler modern web tasarımının vazgeçilmez parçalarıdır. CTA butonlarında dikkat çekmek, hero bölümlerinde atmosfer oluşturmak, kartlarda hafif derinlik vermek için kullanılır. Glassmorphism efektlerinde yarı saydam gradientler tercih edilir. Ayrıca metin üzerinde gradient uygulayarak (background-clip: text) ilginç başlık efektleri elde edebilirsiniz.
Arka Plan ve Hero Bölümleri
Tam sayfa veya bölüm arka planlarında gradientler atmosfer oluşturur. Genellikle koyu tonlardan açık tonlara geçiş yaparak içeriği öne çıkarır. Üç veya daha fazla renk durağı ile zengin geçişler elde edilebilir.
Butonlar ve Etkileşimli Öğeler
Gradient butonlar kullanıcı dikkatini çeker. Hover durumunda opacity veya renk değişimi ile etkileşim artırılabilir. Subtle (hafif) gradientler daha profesyonel görünüm sağlar.
Özel Dikkat: Erişilebilirlik
Gradient arka plan üzerinde metin kullanırken kontrast oranına dikkat edin. WCAG AA standardı normal metin için en az 4.5:1 kontrast önerir. Geçiş bölgelerinde okunabilirlik düşebilir; bu alanlarda metin yerine dekoratif öğeler kullanmayı tercih edin.
İlgili rehberler: Linear, Radial ve Conic Farkları · Renk Uyumu · Gradient Oluşturucu · Marka Renkleri