CSS gradyan oluşturucu
Doğrusal, dairesel veya konik bir gradyan tasarlayın, canlı güncellenmesini izleyin ve CSS background kuralını kopyalayın.
Tamamen tarayıcınızda çalışır
Renk durakları
Hazır ayarlar
Durak renkleri tarayıcınızın anladığı herhangi bir renk olabilir (HEX, adlar, rgb(), hsl(), oklch()). En çok 10 durak. Konumlar yüzde olarak verilir; çıktı, tedarikçi öneki içermeyen düz CSS'tir.
CSS gradyanı nasıl yapılır?
- Doğrusal, Dairesel veya Konik seçeneğini seçin ya da hazır bir ayardan başlayın.
- Açıyı veya konumu ayarlayın, ardından renk duraklarını düzenleyin: her rengi ve konumu değiştirin, durak ekleyin ve yukarı ya da aşağı taşıyın.
- CSS'i kopyala düğmesine basın ve kuralı stil sayfanıza yapıştırın. Öncesinde düz bir renk satırı istiyorsanız yedek seçeneğini işaretleyin.
CSS gradyanını okumak
CSS gradyanı, tarayıcının kendisinin çizdiği bir resimdir; bu yüzden her boyuta ölçeklenir ve indirme maliyeti yoktur. Doğrusal gradyan, renkleri bir açıyla belirlenen çizgi boyunca karıştırır. Dairesel gradyan, bir merkez noktasından dışa doğru bir daire veya elips içinde karıştırır. Konik gradyan, renkleri bir saatin ibresi gibi bir merkez etrafında tarar; bu da onu pasta grafikleri ve renk çarkları için doğal bir seçim yapar.
Her renk durağı, gradyan çizgisi boyunca bir renk artı yüzde olarak yazılmış bir konumdur. İki durak arasında tarayıcı yumuşak bir geçiş yapar. İki durak aynı konumu paylaşırsa geçişin genişliği kalmaz ve keskin bir kenar elde edersiniz. Bir durak kendinden öncekinden daha erken bir konuma yerleştirilirse tarayıcılar onu önceki durağın konumunda sayar; bu aracın durakları yeniden sıralamanıza ve sıralamanıza izin vermesinin nedeni budur.
Kural background: olarak yazılır, bu yüzden her öğede çalışır. Gradyanlar arka plana çizildiği için üzerlerindeki metin, düz bir renk üzerindeki metinle aynı kontrast özenini gerektirir: geçişin en açık ve en koyu bölümlerini ayrı ayrı denetleyin.
İpuçları
- Birbirine uyan durak renklerini Renk paleti oluşturucu ile seçin.
- Bir durağı HEX, RGB ve HSL arasında Renk dönüştürücü ve kontrast denetleyici ile dönüştürün.
- Stil sayfasını yayına mı alıyorsunuz? Onu CSS küçült ve düzenle ile küçültün.
Sık sorulan sorular
Doğrusal bir gradyanda açı ne anlama gelir?
0deg yukarıyı gösterir, yani gradyan alt kenardan yukarı doğru gider. 90deg soldan sağa, 180deg yukarıdan aşağı, 270deg sağdan sola gider. 360deg, 0deg ile aynı yöndür. Araç girdiğiniz sayıyı deg birimiyle yazar.
Yumuşak geçiş yerine sert bir kenarı nasıl elde ederim?
İki komşu durağa aynı konumu verin. Örneğin %50'de kırmızı ve ardından %50'de mavi, yarı noktada geçiş olmadan renk değiştirir. Sert şeritler hazır ayarı bunu gösterir.
Tekrarlayan seçeneği ne yapar?
repeating-linear-gradient, repeating-radial-gradient veya repeating-conic-gradient yazar. İlk ve son durağınız arasındaki desen döşenir; bu yüzden yalnızca son durak %100'den önceyse görünür. Şeritler elde etmek için %0, %10 ve %20'de duraklar deneyin.
Düz yedek satırı ne işe yarar?
Gradyanı okuyamayan bir tarayıcı o satırı yok sayar ve öncekini korur. Kullanımdaki neredeyse tüm tarayıcılar olan gradyan destekleyen tarayıcılar onu geçersiz kılar. Yedek, ilk durağınızın rengidir.
Hangi renk biçimleri kabul ediliyor?
Tarayıcınızda CSS color özelliğinin kabul ettiği her şey: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) veya oklch(0.5 0.2 260). Başka bir şey yazmak bir ileti gösterir ve ekranda son geçerli gradyanı bırakır.
Konik bir gradyan için konum gerekir mi?
Her zaman bir merkezi vardır ve bu araç onu yüzde olarak yazar; yani 50% 50% kutunun ortasıdır. Başlangıç açısı, renk taramasının nerede başladığını döndürür ve yukarıdan saat yönünde ölçülür.