CSS gradyan oluşturucu
Gradyanı görsel olarak şekillendirin, ardından tüm modern tarayıcılarda çalışan CSS’i kopyalayın.
Bu cihazda mühürlendi
Tarayıcınızda çalışır. Hiçbir şey yüklenmez.
Mühürlü
Önizleme
Renk durakları
Durakları sürükleyin ya da birini seçip ok tuşlarını kullanın. Durak eklemek için çubuğa tıklayın.
Ayarlar
OKLCH ve OKLab, bazı gradyanların ortasındaki soluk gri bölgeyi önler. Eski tarayıcılar için standart bir sürüm de eklenir.
CSS kodu
Nasıl çalışır
-
Bir tür seçin
Doğrusal, radyal veya konik bir gradyan seçin ya da bir hazır ayarla başlayın; açısını veya merkezini ayarlayın.
-
Renkleri düzenleyin
Renk duraklarını çubuk boyunca sürükleyin, yenilerini eklemek için çubuğa tıklayın ve her durağın rengini ve konumunu değiştirin.
-
CSS’i kopyalayın
Oluşturulan kodu kopyalayıp stil dosyanıza arka plan olarak yapıştırın.
Sıkça sorulan sorular
Doğrusal, radyal ve konik gradyanlar arasındaki fark nedir?
Doğrusal gradyan, seçtiğiniz açıda düz bir çizgi boyunca renk değiştirir. Radyal gradyan, bir merkez noktasından daire veya elips şeklinde yayılır. Konik gradyan ise bir saatin akrep ve yelkovanı gibi merkez noktasının etrafında döner; renk çemberleri ve pasta grafikleri için kullanışlıdır.
Oluşturulan CSS tüm tarayıcılarda çalışır mı?
Doğrusal, radyal ve konik gradyanlar tüm güncel tarayıcılarda çalışır. OKLCH veya OKLab karışımını seçtiğinizde kod önce standart bir satır da içerir; böylece eski tarayıcılar yine bir gradyan gösterir.
Gradyanım neden ortada gri görünüyor?
Çok farklı iki rengi standart sRGB uzayında karıştırmak çoğu zaman bulanık bir griden geçer. Karışımı OKLCH veya OKLab’e çevirin: renkler gözün algıladığı şekilde karıştırılır, böylece orta kısım parlak kalır.
Saydam renkler kullanabilir miyim?
Evet. Bir durağın renk alanına rgb(52 66 217 / 0.4) veya #3442d966 gibi saydamlık içeren bir renk yazın. Görsellerin üzerine yerleştirilen katmanlar için idealdir.
Kaç renk durağı ekleyebilirim?
İhtiyacınız kadar. Her durak fareyle, dokunarak veya ok tuşlarıyla taşınabilir ve en az iki durak kaldığı sürece kaldırılabilir.