Gradient söz dizimini elle yazmak şaşırtıcı derecede zahmetli: açı, durak sırası ve yüzde konumları birbirini etkiler, ufak bir yazım hatası tüm background tanımını sessizce bozar. Bu araç, önizleme ile kodu her zaman eş zamanlı tutar - gördüğünüz şey, kopyaladığınız CSS'in birebir aynısıdır. Tamamen istemci tarafında çalışır, yani tasarladığınız hiçbir şey herhangi bir yere yüklenmez.
Ücretsiz CSS Gradient Generator
Tümüyle tarayıcınızda çalışır - yükleme yok, üyelik yok.
Tür
Renk durakları
CSS kodu
CSS gradient generator nedir?
CSS gradient generator, sizin için linear-gradient(), radial-gradient() veya conic-gradient() kodunu oluşturan görsel bir araç. Renklerinizi seçin, durak konumlarını sürükleyin, açıyı ayarlayın; tarayıcının tam olarak neyi çizeceğini gösteren canlı bir önizlemeyle birlikte yapıştırmaya hazır CSS kodunu kopyalayın. Her şey tarayıcınızda çalışır.
Nasıl kullanılır
- 1Bir gradient tipi seçin. Linear, radial veya conic seçin. Linear bir açı kaydırıcısı gösterir; radial şekil (daire veya elips) ve konum ekler; conic'te başlangıç açısı ve konum bulunur.
- 2Renk duraklarınızı ayarlayın. Renk seçmek için her renk örneğine tıklayın ve durak konumunu taşımak için kaydırıcısını sürükleyin. 8 durağa kadar ekleyin ya da 2'ye kadar kaldırın.
- 3Yönü ayarlayın. Açı kaydırıcısını (0-360 derece) sürükleyin veya bir konum anahtar kelimesi seçin. Önizleme her değişiklikte anında güncellenir.
- 4CSS kodunu kopyalayın. Düz renk yedek satırı dahil background tanımını almak için Kopyala'ya tıklayın ve stil dosyanıza yapıştırın.
Kimler için
- Söz dizimini ezberlemeden tam
linear-gradient()satırına ihtiyacı olan, hero, kart veya buton arka planı tasarlayan ön uç geliştiricileri. - Bir mockup'i birebir eşlemek isteyen web ve arayüz tasarımcıları: gradienti görsel olarak yeniden oluşturun, üretilen CSS'i doğrudan geliştirici ekibine teslim edin.
- Eski istemcilerde tasarımın düzgün bozulması için düz renk yedeğine ihtiyacı olan e-posta ve açılış sayfası tasarımcıları - çıktı bunu otomatik olarak içerir.
- Açı, renk durakları ve gradient tipinin sonucu gerçek zamanlı nasıl değiştirdiğini görmek isteyen CSS öğrenen öğrenciler.
Sık sorulan sorular
Bu CSS gradient generator ücretsiz mi?
Evet - yüzde yüz ücretsiz, kayıt yok, filigran yok, limit yok. İstediğiniz kadar gradient oluşturun ve CSS kodunu doğrudan projenize kopyalayın.
Herhangi bir şey sunucuya yükleniyor mu?
Hayır. Gradient tamamen tarayıcınızda düz JavaScript ile oluşturulur ve önizlenir. Hiçbir renk, kod veya kullanım verisi hiçbir yere gönderilmez.
Linear, radial ve conic gradientler arasındaki fark nedir?
Linear gradient, seçtiğiniz bir açıda düz bir çizgi boyunca renkleri karıştırır. Radial gradient, bir merkez noktadan dışa doğru daire veya elips şeklinde yayılır. Conic gradient ise renkleri bir renk çarkı veya pasta grafiği gibi merkez etrafında döndürür.
CSS gradientlerde renk durakları nasıl çalışır?
Her durak, gradient çizgisi boyunca yüzde 0 ile yüzde 100 arasında bir konumla bir rengi eşleştirir. Tarayıcı komşu duraklar arasında yumuşak geçiş yapar. İki durağı aynı konuma yerleştirmek, geçiş yerine keskin bir kenar oluşturur - çizgi desenleri ve pasta grafiği efektleri için faydalıdır.
Hangi tarayıcılar bu gradientleri destekler?
Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılar önek gerektirmeyen linear-gradient() ve radial-gradient()'i destekler; conic-gradient() ise 2020'den beri her yerde destekleniyor. Kopyalanan kod, daha eski tarayıcılar için de düz renk yedeği içerir.
Oluşturulan gradienti metin rengi olarak kullanabilir miyim?
Doğrudan değil - gradientler renk değil, görsel sayılır. Gradienti metin elemanında background-image olarak uygulayın, ardından gradientin harflerin içinden görünmesi için background-clip: text ve color: transparent ekleyin.
Gradientimde neden bantlanma görüyorum?
Bantlanma, birbirine yakın tonlarda iki uzak durak geniş bir mesafede karıştığında ve 8 bit renk adımları ortaya çıktığında oluşur. Araya bir renk durağı ekleyerek, karışım mesafesini kısaltarak veya ton kadar açıklığı da farklı renkler seçerek bunu azaltabilirsiniz.