CSS gradyan oluşturucu
Bir gradyanı gözle oluştur, CSS'sini kopyala.
Bir durağı taşımak için bir tutamağı sürükle, veya bir tane eklemek için çubuğa tıkla. Tutamaklar ok tuşlarıyla da hareket eder.
Renk durakları
- %
- %
- %
Tarayıcında çalışır. Yazdığın hiçbir şey bir yere gönderilmez.
- Sürükleyerek durak yerleştir
- Doğrusal, radyal ve konik
- 8 hazır şablon
Bir CSS gradyanı nasıl oluşturulur
- Bir şablon seç, veya her durağın rengini ayarla.
- Çubuktaki tutamakları sürükle, bir durak eklemek için çubuğa tıkla.
- CSS'yi kopyala ve stil dosyana yapıştır.
Gradyan türleri karşılaştırması
| Tür | Nasıl yayılır | CSS fonksiyonu |
|---|---|---|
| Doğrusal | Bir açıyla düz bir çizgi boyunca | linear-gradient() |
| Radyal | Bir merkez noktasından dışa doğru | radial-gradient() |
| Konik | Bir renk çarkı gibi merkez nokta etrafında | conic-gradient() |
Gradyan türüne göre tarayıcı desteği
| Gradyan türü | En az şunu ister |
|---|---|
| Doğrusal ve radyal | Bir önekle IE10'a kadar her güncel tarayıcı |
| Konik | Chrome 69, Firefox 83, Safari 12.1 |
Bu sayfanın verdiği CSS her zaman önce düz bir background-color satırıyla başlar, bu yüzden gradyanı çizemeyen bir tarayıcı bile boş bir kutu yerine ilk durağın rengini gösterir.
Daha yumuşak gradyanlar için ipuçları
- Gradyanın düz iki tonlu bir geçiş yerine üçüncü bir renk üzerinden karışan iki renk gibi okunması için ortaya üçüncü bir durak ekle.
- Karışma yerine keskin bir kenar için komşu iki durağa aynı konumu ver.
- 0deg alttan üste, 90deg soldan sağa gider. Her durağı yeniden yazmadan bir gradyanın yönünü tersine çevirmek için herhangi bir açıya 180 ekle.
- Gradyanın gerilmiş görünmemesi için dairesel şekli kutuya uydur: kare öğeler için daire, geniş olanlar için elips.
CSS gradyan oluşturucu SSS
CSS'de bir gradyan nasıl yapılır?
background özelliğini background: linear-gradient(90deg, #ff7e5f, #feb47b) gibi bir gradyan fonksiyonuna ayarla. İlk değer yön, sonra her biri isteğe bağlı bir konumla renkler gelir.
Doğrusal, radyal ve konik gradyanlar arasındaki fark ne?
Doğrusal bir gradyan rengi düz bir çizgi boyunca değiştirir, radyal bir gradyan bir merkez noktasından dışa doğru yayılır, konik bir gradyan ise bir renk çarkı veya pasta grafiği gibi bir merkez nokta etrafında döner.
Açı hangi yöne bakıyor?
0deg alttan üste, 90deg soldan sağa, 180deg üstten alta ve 270deg sağdan sola gider. Konik gradyanlarda açı, dönüşün nereden başladığını ayarlar.
İki renk arasında keskin bir çizgi nasıl elde ederim?
Komşu iki durağa aynı konumu ver, örneğin kırmızı %50 ve mavi %50. Renk o zaman karışmak yerine o noktada değişir.
CSS gradyanları her tarayıcıda çalışır mı?
Doğrusal ve radyal gradyanlar her güncel tarayıcıda çalışır. Konik gradyanlar Chrome 69, Firefox 83 veya Safari 12.1 ve sonrasını ister. Buradaki CSS, yedek olarak düz bir renk satırıyla başlar.
Bir CSS gradyanını animasyonlu yapabilir miyim?
Hareketli bir etki için büyütülmüş bir gradyan üzerinde background-position veya background-size'ı animasyonlu yapabilirsin. Durak renklerinin kendisini animasyonlu yapmak CSS @property kuralını veya küçük bir betiği gerektirir, çünkü tarayıcılar iki tam gradyan değeri arasında kendi başlarına geçiş yapamaz.
Bir gradyan metin rengi olarak kullanılabilir mi?
Evet. Buradaki gradyan CSS'sini bir arka plana kopyala, sonra gradyanın harflerin içinden görünmesi için metin öğesine background-clip: text ve color: transparent ekle.