Gradient Üretici

Bu araç ne işe yarar?

Gradient Üretici, linear, radial ve conic CSS gradyanlarını canlı önizleme ile oluşturmanızı sağlar. Tasarımcılar ve geliştiriciler için arka plan, buton ve kart efektlerine hızla hazır CSS üretir; sonuç tek tıkla kopyalanabilir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Renk durakları, açı ve gradyan türleri

İstediğiniz kadar renk durağı (color stop) ekleyebilir, her birinin rengini renk seçiciyle ve konumunu 0–100% kaydırıcıyla ayarlayabilirsiniz; duraklar konuma göre otomatik sıralanır. Linear ve conic için 0–360° açı kaydırıcısı bulunur, radial ise circle olarak çizilir. Çıktı doğrudan kullanıma hazır 'background: linear-gradient(135deg, #3b82f6 0%, ...)' biçiminde verilir.

Hazır şablonlar ve kullanım örnekleri

Ocean, Sunset, Forest, Galaxy, Fire ve Rainbow gibi hazır şablonlarla tek tıkla başlayıp üzerinde ince ayar yapabilirsiniz. Üretilen CSS'i hero bölümleri, kart arka planları, buton dolguları veya metin maskeleri için kullanabilirsiniz. Conic gradyanlar pasta grafiği benzeri görseller veya yükleme göstergeleri için, radial gradyanlar ise yumuşak ışık efektleri için idealdir.

Sıkça sorulan sorular

Linear, radial ve conic gradyan arasındaki fark nedir?

Linear renkleri belirli bir açıda düz çizgi boyunca geçirir; radial merkezden dışa doğru dairesel yayılır; conic ise renkleri bir merkez etrafında saat yönünde döndürür. Türü tek tıkla değiştirip önizlemede karşılaştırabilirsiniz.

Kaç renk durağı ekleyebilirim?

En az iki durak gerekir ve istediğiniz kadar ekleyebilirsiniz; örneğin Rainbow şablonu altı durak kullanır. Her durağın konumunu yüzde olarak ayrı ayrı ayarlarsınız.

Üretilen kodu doğrudan projeme yapıştırabilir miyim?

Evet. Çıktı geçerli bir CSS 'background' bildirimidir; herhangi bir öğenin stiline yapıştırabilir veya bir sınıfa atayabilirsiniz.