Gradyan CSS Oluşturucu
İki renkli bir CSS gradyanı oluşturun ve kodu anında kopyalayın.
Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız hiçbir zaman bir sunucuya yüklenmez.
background: linear-gradient(90deg, #3b82f6, #a855f7);
Bu araç ne yapar
Seçtiğiniz iki renk ve bir açıdan bir CSS linear-gradient() arka planı oluşturur; canlı bir önizleme ve kullanıma hazır CSS kodu gösterir.
Nasıl kullanılır
Renk girişleriyle A Rengi ve B Rengini seçin ve açıyı derece olarak ayarlayın. Gradyan önizlemesi ve altındaki CSS kodu, herhangi bir değeri değiştirdiğinizde hemen güncellenir; CSS'i kopyalamak için kopyalama simgesine tıklayın.
Çalışılmış örnek
#3b82f6 (mavi), #a855f7 (mor) ve 90° açı varsayılanlarıyla, araç background: linear-gradient(90deg, #3b82f6, #a855f7); üretir — soldan sağa geçiş yapan bir gradyan, çünkü 90deg, CSS'in açı sisteminde gradyan çizgisini sağa doğru yöneltir.
Gradyan açıları nasıl çalışır
CSS'te 0deg gradyanı alttan üste yöneltir ve açı saat yönünde artar, bu yüzden 90deg soldan sağa, 180deg yukarıdan aşağıya ve 270deg sağdan sola gider. Bu, pusula veya standart matematik açı kuralından farklıdır; gradyanları elle yazarken yaygın bir kafa karışıklığı kaynağıdır.
Sınırlamalar
Bu araç yalnızca basit iki renkli bir doğrusal gradyan oluşturur — radial veya konik gradyanları, ikiden fazla renk durağını veya özel durak konumlarını (eşit bölmek yerine bir rengi %20'ye yerleştirmek gibi) desteklemez. Bunun ötesindeki gradyanlar için, üretilen CSS'i başlangıç noktası olarak kopyalayın ve daha fazla durak eklemek üzere linear-gradient() fonksiyonunu elle düzenleyin.
Kapsam, kaynaklar ve gizlilik
CSS linear-gradient() fonksiyonu, CSS Images spesifikasyonunun bir parçasıdır ve tüm modern tarayıcılar tarafından desteklenir. Gradyan tamamen tarayıcınızda hesaplanır ve işlenir; seçtiğiniz renkler asla yüklenmez.
Sıkça Sorulan Sorular
- Bu araç hangi gradyan türlerini destekliyor?
- Şu anda ayarlanabilir açılı doğrusal gradyanları destekliyor — arka planlar, butonlar ve hero bölümleri için en yaygın kullanılan tür.
- İkiden fazla renk kullanabilir miyim?
- Bu araç temiz, basit bir gradyan için iki rengi destekler — gerekirse üretilen CSS'i manuel olarak daha fazla renk durağıyla genişletebilirsiniz.
- Bu tüm tarayıcılarda çalışır mı?
- Evet, CSS linear-gradient() fonksiyonu tüm modern tarayıcılar tarafından destekleniyor.