Geliştirici / CSS
CSS Gradient Oluşturucu
Canlı önizleme, ihtiyacınız kadar renk durağı ve hazır ayarlarla doğrusal, radyal veya konik bir gradyan tasarlayın, ardından CSS'yi kopyalayın.
CSS Gradient Oluşturucu: Oluşturucu, gördüğünüz gradyan için tarayıcının ihtiyaç duyduğu background bildirimini yazar: açılı linear-gradient, merkezden başlayan bir daire veya elips içeren radial-gradient ya da başlangıç açısından çevresine doğru ilerleyen conic-gradient. Her birinde renk durakları sırasıyla yer alır. Gradyanları çizemeyecek kadar eski tarayıcılar için ilk satıra yedek olarak düz bir renk eklenir. Yeni bir renk, en geniş aralığa komşularından karıştırılarak eklenir; böylece gradyanda ani geçiş oluşmaz. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.
- Kategori
- Geliştirici araçları
- Çalıştırma sayısı
- Tarayıcınızda
- Maliyet
- Ücretsiz · kayıt gerekmez
- Kullanılabilirlik
- Kullanıma hazır
Tamamen tarayıcınızda çalışır
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
İlk satır çok eski tarayıcılar için düz renktir; güncel tüm tarayıcılar ikinci satırdaki gradyanı kullanır.
Hazır ayarlar
Pürüzsüz görünen renk geçişleri
Mavi ile sarı gibi birbirinden çok farklı iki renk tonu arasındaki geçiş, ortada donuk bir griden geçer. Araya daha parlak bir renkte durak eklemek geçişi canlı tutar. Turuncu ile pembe gibi komşu renk tonları arasındaki geçişlerde genellikle yardıma gerek yoktur.
Renkleri renk dönüştürücü ile seçin veya kontrol edin; kutu gölgesi oluşturucu ile bir karta derinlik katın.
Degrade üzerinde metin
Metnin yalnızca ortada değil, degradenin her iki ucunda da okunabilir kaldığını kontrol edin. Beyaz metinli daha koyu bir degrade veya koyu metnin arkasında kullanılan hafif bir degrade, parlak bir gökkuşağından daha güvenlidir.
Nasıl kullanılır?
- Bir hazır ayar seçin veya doğrusal, radyal ya da konik seçeneğini belirleyin.
- Açıyı ayarlayın, renkleri ve konumlarını düzenleyin; daha fazla durak eklemek için bir renk ekleyin.
- CSS'yi stil sayfanıza kopyalayın.
Gizlilik ve sınırlamalar
Her şey tarayıcınızda çalışır; son gradyanınız yalnızca bu tarayıcıda saklanır.
İlgili araçlar
Sık sorulan sorular
Doğrusal bir gradyanda açı ne anlama gelir?
0deg'den alta doğru başlayıp üste, 90deg'den soldan sağa, 180deg'den üstten alta ve 270deg'den sağdan sola ilerler. Gradyan bu yönde çizilir; bu nedenle 135deg, sol üst köşeden sağ alt köşeye doğru ilerler.
Renk durağı nedir?
Gradyan boyunca %0 ile %100 arasındaki bir konumda tam olarak ulaşılan renk ve konumdur. İki durak arasında renkler birbirine karışır; iki durağı aynı konuma yerleştirmek, karışım yerine keskin bir kenar oluşturur. Şeritler bu şekilde yapılır.
Konik gradyan ile radyal gradyan arasındaki fark nedir?
Radyal gradyan, merkezden dışarı doğru halkalar hâlinde renk değiştirir. Konik gradyan ise renkleri saatin akrep ve yelkovanı gibi merkezin çevresinde değiştirir; bu özellik renk tekerlekleri ve pasta grafikler için kullanışlıdır.
-webkit- ön eklerine hâlâ ihtiyacım var mı?
Hayır. Güncel tüm tarayıcılar linear-gradient ve radial-gradient özelliklerini ön ek olmadan destekler; conic-gradient ise 2021'den beri tüm bu tarayıcılarda çalışır. İlk satırdaki yedek renk yalnızca çok daha eski tarayıcılar içindir.
Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez