Tailwind çıktısı sunan CSS gradyan oluşturucu. Doğrusal ve radyal gradyanları görsel olarak tasarlayın, üretime hazır CSS veya Tailwind sınıflarını kopyalayın.
background: linear-gradient(135deg, #E91E8C 0%, #7B2FBF 100%);
Doğrusal (yönlü), radyal (dairesel) veya konik (açısal) gradyan türleri arasından seçim yapın.
Renk örneklerine tıklayarak renkleri değiştirin, konum yüzdelerini ayarlayın ve renk durakları ekleyin veya kaldırın. İlham için hazır şablonları deneyin.
Doğrusal gradyanlar için açıyı ayarlayın. Radyal için şekli ve merkez konumunu seçin. Konik için başlangıç açısını ayarlayın.
CSS ve Tailwind CSS çıktı sekmeleri arasında geçiş yapın, ardından projeniz için kodu kopyalamak üzere Kopyala'ya tıklayın.
Üç CSS gradyan türünün tamamını destekliyoruz: linear-gradient (yönlü gradyanlar için), radial-gradient (dairesel gradyanlar için) ve conic-gradient (açısal gradyanlar için).
Evet. Tailwind CSS sekmesine geçerek gradyanı doğrudan Tailwind projelerinizde çalışan bir rastgele değer sınıfı olarak alabilirsiniz.
İhtiyacınız kadar renk durağı ekleyebilirsiniz. Minimum iki durak gereklidir, bunlar bir gradyan oluşturmak için zorunludur.
Evet. Tüm şablonlar ve oluşturulan gradyanlar, herhangi bir kişisel veya ticari projede atıf gerektirmeden ücretsiz olarak kullanılabilir.
Renk bir çizgi boyunca ilerlemek yerine merkez etrafında döner. Renk çemberi, pasta grafik tarzı halkalar ve ilerleme göstergeleri için aradığınız şey budur.
İki durak renk tonu olarak birbirine yakınken geniş bir alana yayılırsa bantlanma çıkar. Araya bir durak eklemek veya tonu biraz kaydırmak genelde çözer.
CSS bir background-image gradyanını doğrudan ara değerleyemez. Gradyanı ögeden büyük yapıp background-position'ı hareketlendirin veya ögeyi döndürün.
Hayır, arbitrary değerler Tailwind'in normal bir özelliği. Aynı gradyanı birçok yerde kullanacaksanız theme yapılandırmanıza taşımak daha iyi olur.
backdrop-filter ile buzlu cam paneller kurun, gerçek zeminlerde önizleyin.
Aracı AçKatmanlı CSS gölgelerini canlı önizlemeyle kurun, sonra düz CSS veya Tailwind değeri olarak kopyalayın.
Aracı AçTutamaçları sürükleyerek CSS easing eğrisi şekillendirin ve animasyonu izleyin.
Aracı Aç