CodeKitHubBu Araç Nedir?
CSS gradyanları, yüklediğiniz dosyalar değil, tarayıcının bir renk listesinden ürettiği görsellerdir — linear-gradient() belirli bir açıda düz bir çizgi boyunca renkler arasında geçiş yapar, radial-gradient() ise merkez bir noktadan dışa doğru renkler arasında geçiş yapar. Her ikisi de, isteğe bağlı olarak gradyan üzerinde bir konuma sabitlenebilen iki veya daha fazla renk durağı kabul eder.
Elle yazıldığında gradyanlarda ince hatalar yapmak kolaydır: durak sırası, eksik yüzdeler veya yanlış yönde bir açı değeri (CSS açıları, matematiksel açılardan farklı olarak 'to top'tan başlayarak saat yönünde ilerler). Bu araç sözdizimini aradan çıkarır — renkleri ve konumları seçiciler ve kaydırıcılarla ayarlayın, önizleme kutusunun gerçek zamanlı güncellenmesini izleyin ve sonuç uygun göründüğünde ortaya çıkan CSS'i kopyalayın.
Kaynak: CSS Images Module Level 3, W3C — linear-gradient() ve radial-gradient() söz dizimini tanımlayan spesifikasyon.
Neden Kullanmalısınız?
- Canlı önizleme, her renk, konum ve açı değişikliğinde anında güncellenir — sonucu görmek için sayfayı yeniden yüklemenize gerek yoktur.
- Tek tıklamayla doğrusal ve radyal gradyan arasında geçiş yapın; açı kontrolü, geçerli olmadığı radyal gradyanlarda otomatik olarak gizlenir.
- Sabit iki renkli bir gradyanla sınırlı kalmak yerine renk durakları ekleyin veya kaldırın (2 ila 4 arası).
- Her durağın kendi konum kaydırıcısı vardır, bu yüzden duraklar eşit aralıklarla yerleştirilmek zorunda değildir.
- Standart linear-gradient()/radial-gradient() sözdizimini kullanarak yapıştırmaya hazır CSS üretir.
- Tamamen tarayıcınızda çalışır — yapılandırdığınız hiçbir şey hiçbir yere yüklenmez. Ücretsiz, kayıt gerektirmez, mobilde çalışır.
Nasıl Kullanılır
- Gradyan türü olarak Doğrusal veya Radyal seçin.
- Doğrusal bir gradyan için açı kaydırıcısını sürükleyin — 90deg soldan sağa, 180deg yukarıdan aşağıya gider ve böyle devam eder.
- Her durak için renk ve konum ayarlayın; ilk durak gradyanın başlangıç rengi, sonuncusu bitiş rengidir.
- Çok renkli bir gradyan için toplamda 4 durağa kadar eklemek üzere '+ Durak ekle'ye tıklayın veya birini kaldırmak için ✕ düğmesine tıklayın (minimum 2).
- Oluşturulan CSS kodunu kopyalayın ve bir background veya background-image tanımına yapıştırın.
Örnek
Giriş
Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%Çıkış
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Soldan sağa turuncudan pembeye bir gradyan — düğmeler, bannerlar ve hero arka planları için yaygın bir stil.
Doğrusal ve radyal gradyanlar
Doğrusal bir gradyan, bir açı tarafından kontrol edilen düz bir çizgi boyunca renk geçişi yapar — bannerlar, düğmeler ve yönlü arka planlar için kullanışlıdır. Radyal bir gradyan, genişleyen halkalar hâlinde bir merkez noktadan dışa doğru renk geçişi yapar; bu, spot ışığı efektleri, rozetler veya parlama tarzı arka planlara uygundur. Bu araç, radyal gradyanı varsayılan olarak kutunun merkezinde bir daire şekline ayarlar; bu en yaygın radyal kullanım örneğini kapsar. Sonucu elle daha fazla düzenlemeniz gerekirse CSS ayrıca elips şekillerini ve merkez dışı konumları da destekler.
Yaygın gradyan desenleri
- İnce marka vurgusu: yumuşak bir arka plan için sığ bir açıda iki yakın ton (örneğin aynı rengin iki tonu).
- Yüksek kontrastlı CTA düğmesi: cesur, tıklanabilir bir görünüm için 90deg veya 135deg'de iki doygun, tamamlayıcı renk.
- Bir görsel üzerinde katman: bir background-image üzerine yerleştirilen, şeffaftan katı bir renge geçen bir gradyan (opaklığı seçicinin altındaki hex renkte bir rgba renk ile ayarlayın veya kopyaladıktan sonra düzenleyin).
- Çok duraklı gökkuşağı/marka gradyanı: iki renkli bir gradyanın izin verdiğinden daha yumuşak, daha kademeli geçişler için 0-100% aralığına yayılmış 3-4 durak.
- Radyal spot ışığı: hero bölümleri veya kart vurguları için kullanışlı, %0'a yakın parlak bir merkez duraktan %100'e yakın daha koyu bir kenar durağına solan bir gradyan.
Diğer CSS araçlarıyla eşleştirme
Gradyanlar genellikle aynı öğe üzerinde yuvarlatılmış köşeler ve gölgelerle birleştirilir — yumuşak bir box-shadow ve yuvarlatılmış köşelere sahip gradyanlı bir kart, yaygın bir arayüz desenidir. Her bir parçayı ayrı ayrı oluşturun ve CSS tanımlarını öğe üzerinde birleştirin.
→ Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu · Renk Seçici
Sıkça Sorulan Sorular
linear-gradient() ile radial-gradient() arasındaki fark nedir?
linear-gradient() belirli bir açıda düz bir çizgi boyunca renkler arasında geçiş yapar. radial-gradient() ise genişleyen şekillerde (daire veya elips) merkez bir noktadan dışa doğru renkler arasında geçiş yapar. Her ikisi de aynı türden virgülle ayrılmış renk durağı listesini kabul eder; yalnızca geçişin şekli farklıdır.
CSS gradyan açıları nasıl çalışır?
CSS gradyan açıları, 'to top'tan (0deg yukarı bakar) başlayarak saat yönünde ilerler. 90deg sağı, 180deg aşağıyı ve 270deg solu gösterir — bu, standart matematiksel açıların tam tersi bir kurallılıktır ve gradyanları elle yazarken yaygın bir karışıklık kaynağıdır.
4'ten fazla renk durağı kullanabilir miyim?
Evet — CSS gradyanları virgülle ayrılmış herhangi bir sayıda renk durağını kabul eder. Bu araç, yönetilebilir bir arayüz için etkileşimli oluşturucuyu 4 ile sınırlar, ancak oluşturulan CSS'i kopyalayıp stil sayfanıza elle daha fazla virgülle ayrılmış 'renk konum%' girdisi ekleyebilirsiniz.
Gradyanım neden düzgün değil de bantlı görünüyor?
Bantlanma genellikle tondan çok uzak renklerin arasında çok az durak olmasından veya tarayıcının çok düşük kontrastta kendi sınırlı renk hassasiyetinden kaynaklanır. Karışık bir renkle ara bir durak eklemek veya tonda birbirine daha yakın renkler seçmek genellikle daha düzgün bir sonuç verir.
Bir CSS gradyanını animasyonlu hale getirebilir miyim?
Doğrudan değil — tarayıcılar iki keyfi gradyan tanımı arasında enterpolasyon yapamadığından, gradyanlar background-position veya transform gibi doğrudan animasyonlu değildir. Yaygın çözümler arasında büyük boyutlu bir gradyan üzerinde background-position'ı animasyonlu hale getirmek veya yalnızca tek bir renk değişiyorsa background-color'ı geçişli yapmak yer alır.