CSS Gradient Oluşturucu
Tasarımlarınız için güzel gradientler oluşturun
Hazır Şablonlar
Gradient Generator Hakkında
CSS gradyanını görsel olarak oluşturun ve kuralı doğrudan stil dosyanıza kopyalayın. Renkleri, durakları ve açıyı ayarlayın, sonucu anında görün, üretilen linear-gradient veya radial-gradient değerini alın.
Bir gradyan nasıl tanımlanır?
CSS gradyanı bir yön ve en az iki renk durağı gerektirir. Doğrusal gradyanda önce açı gelir — 0deg aşağıdan yukarıya, 90deg soldan sağa boyar — ardından her renk ve isteğe bağlı olarak konumu yazılır. Dairesel gradyan ise açının yerine bir şekil alır ve bir çizgi boyunca değil merkez noktadan dışa doğru yayılır.
background: linear-gradient(90deg, #6c5ce7 0%, #00b894 100%); sol kenardaki mordan sağdaki yeşile geçer.Gradyanım neden bantlı görünüyor?
Geniş bir alan dar bir renk aralığıyla doldurulduğunda görünür şeritler oluşur: ekranın yumuşak geçişi işlemek için yeterli ara adımı yoktur, özellikle 8 bit renkte. Duraklar arasındaki farkı artırmak, araya bir durak eklemek veya çok hafif bir doku bindirmek bu etkiyi azaltır.
Hâlâ tarayıcı öneki gerekiyor mu?
Hayır. Öneksiz linear-gradient ve radial-gradient yıllardır tüm güncel tarayıcılarda destekleniyor. -webkit-linear-gradient gibi önekli sürümler yalnızca on yıldan eski tarayıcıları desteklemek zorundaysanız anlamlıdır; aksi hâlde stil dosyanıza gereksiz yük bindirir.
Diğer ücretsiz araçlarımızı da deneyin: box shadow generator, color converter ve image color picker.