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.
Tarayıcı desteği
CSS linear-gradient() fonksiyonu, CSS Images spesifikasyonunun bir parçasıdır ve tüm modern tarayıcılar tarafından desteklenir; bu yüzden kopyaladığınız kod önek gerektirmeden çalışır.
Gizlilik
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.
İlgili Araçlar
Renk Paleti Oluşturucu
Tek tıkla rastgele 5 renkli bir palet oluşturun.
Tamamlayıcı Renk Oluşturucu
Herhangi bir hex renk için tamamlayıcı rengi bulun.
Renk Kontrastı Kontrol Aracı
Metin ve arka plan renkleri arasındaki WCAG kontrast oranını kontrol edin.
Analog Renk Oluşturucu
Herhangi bir temel renkten uyumlu bir analog renk şeması oluşturun.
Renk Tonu ve Tint Oluşturucu
Herhangi bir temel rengin tint ve gölgelerini oluşturun.
Rastgele Renk Oluşturucu
Tek tıkla rastgele hex ve RGB renkler oluşturun.