CSS Renk Geçişi Üreteci

Bu CSS renk geçişi üreteci, senin denetlediğin renk duraklarından doğrusal ve dairesel geçişler kurar; canlı bir önizleme ve yapıştırmaya hazır bir arka plan bildirimi sunar. Durakları çubuk boyunca sürükle, açıyı ya da şekli ayarla, CSS anında güncellensin.

Her şey seçtiğin renklerden ve ayarlardan yola çıkarak tarayıcında çalışır, bu yüzden hiçbir şey yüklenmez ve sonucu kopyalayıp çevrimdışı kullanabilirsin.

Doğrusal geçiş renkleri düz bir çizgi boyunca harmanlar ve açı yönünü belirler: 0 derece yukarıyı, 90 derece sağı, 180 derece aşağıyı gösterir. Dairesel geçiş ise merkezden dışa doğru, daire ya da elips biçiminde harmanlar.

İkisi de standart CSS değerleridir, linear-gradient() ve radial-gradient() olarak yazılır ve ikisi de aynı renk durakları listesini kullanır; bu yüzden türü değiştirmek renklerini korur, yalnızca nasıl yayıldıklarını değiştirir.

Her renk durağı, yüzde 0 ile yüzde 100 arasında bir konuma yerleştirilmiş bir renktir. Geçiş, komşu duraklar arasında yumuşakça harmanlanır; bu yüzden bir durağın konumu, renginin nerede doruğa çıkacağını ve bir sonrakine ne kadar hızlı geçeceğini belirler.

Çok renkli geçişler kurmak için istediğin kadar durak ekle, harmanı ince ayarlamak için onları sürükle ya da yeni bir durağı istediğin yere bırakmak için çubuğa tıkla. Bir geçişin gerektirdiği en az durak sayısı ikidir.

Üretilen kodu kopyala ve bir bölüm, kart veya düğme gibi herhangi bir öğenin arka planı olarak yapıştır. Modern tarayıcılar linear-gradient ve radial-gradient değerlerini üretici öneki olmadan destekler, bu yüzden değer olduğu gibi çalışır.

Bir renk geçişi yalnızca bir değer olduğu için, arka plan görseli beklenen her yerde de kullanabilir, yedek olarak düz bir rengin üzerine katmanlayabilir ya da tutarlı bir görünüm için aynı durakları doğrusal ve dairesel sürümlerde yeniden kullanabilirsin.