Çevrimiçi Gradyan Arka Plan Oluşturucu

CSS gradyan efektlerini gerçek zamanlı önizleyin; doğrusal, radyal ve konik gradyanları destekler, tek tıkla kod oluşturup görsel dışa aktarın

Hata bildirimi

Tarayıcı yürütme modu: Verileriniz tarayıcınızda işlenir ve sunucuya yüklenmez.

Hız ve kararlılık: İşleme hızı cihazınıza ve tarayıcınıza bağlıdır. Büyük toplu işler için masaüstü sürümü daha kararlı olabilir.

Araç yükleniyor, lütfen bekleyin...

Çevrimiçi araç yüklenmez veya çalışmazsa masaüstü aracını deneyin. https://tools.yikeaigc.com/

Araç Kullanımı

Eski sürüme dön

Önce gradyanı ayarlayın, sonra kodu kopyalayın veya görseli dışa aktarın. Doğrusal, radyal, konik, tekrarlı gradyanları ve çoklu renk duraklarını destekler; değişiklikler sağ önizlemeye yansır.

Gradyanı ayarla

Önce gradyan türünü seçin, sonra yönü ve renk duraklarını ayarlayın. Renk duraklarını küçükten büyüğe sıralayın.

Gradyan türüKonik gradyan, açılı renk çarkları ve halka arka planlar için uygundur

Yön ve şekilDoğrusal gradyanda açı veya hızlı yön kullanılabilir

Doğrusal açı90°

Tekrar aralığı32%

Radyal şekil

Yayılma aralığı

Tekrar aralığı32%

Merkez X50%

Merkez Y50%

Başlangıç açısı0°

Merkez X50%

Merkez Y50%

Tekrarlı gradyan Yumuşak ışık katmanı Vinyet İnce doku

Renk durakları2-10 durak desteklenir; opaklık ve konum ayarlanabilir

Örnek şablonlarRenk başlangıcı olarak ayarlanabilir

Kod dışa aktarma

Önizlemeyi onayladıktan sonra CSS kopyalayabilir veya PNG, JPG, SVG, CSS dosyaları ve kaynak paketi dışa aktarabilirsiniz.

Kod biçimiGeliştirme senaryosuna göre bildirim seçin

Kod modu

Sınıf / değişken adı

Yedek arka plan rengi ekle Kodu sıkıştır

CSS kodu

Görsel BoyutlarıÖzel boyut, görsel ve SVG dışa aktarmada kullanılır

Boyut hazır ayarları

JPG kalitesi92%

Genişlik(px)

Yükseklik(px)

Kaynakları indirKaynak paketi CSS, SVG, PNG ve ayar JSON’u içerir

Canlı önizleme

Gradient Preview Parametreler değişince anında güncellenir

TürDoğrusal

Renk durakları2

Dışa aktarma boyutu1920x1080

Kod uzunluğu0

Talimatlar

Yazılım Kullanım Talimatları

Gradyan türünü ayarlayın: Doğrusal gradyan, radyal gradyan veya konik gradyan seçin. Doğrusal gradyan banner ve web sayfası arka planları için, radyal gradyan merkezden yayılan efektler için, konik gradyan ise halka, renk çarkı ve dekoratif desenler için uygundur.
Yön ve şekli ayarlayın:
- Doğrusal gradyan: Yön düğmelerini kullanabilir veya açı kaydırıcısıyla 0-360 derece yön ayarlayabilirsiniz.
- Radyal gradyan: Daire veya elips, yayılma aralığı ve merkez noktası X/Y konumu ayarlanabilir.
- Konik gradyan: Başlangıç açısı ve merkez noktası konumu ayarlanabilir.
Renk duraklarını yapılandırın: Her renk durağını renk seçici, HEX giriş kutusu, konum yüzdesi ve saydamlık parametreleriyle kontrol edin. Renkleri ekleyebilir, silebilir, sıralayabilir, ters çevirebilir ve durakları tek tıkla eşit dağıtabilirsiniz.
Efekt seçeneklerini kullanın: Arka planı web sayfası ilk ekranı, kartlar, posterler ve tasarım materyalleri için daha uygun hale getirmek üzere tekrarlanan gradyan, yumuşak ışık katmanı, vinyet ve ince doku açılabilir.
Kopyalayın ve dışa aktarın: “Kod dışa aktarma” bölümünde CSS sınıf adı, yalnızca bildirim veya CSS değişkenleri modunu seçerek CSS kodunu kopyalayabilir; ayrıca PNG, JPG, SVG, CSS dosyaları ve ZIP kaynak paketini dışa aktarabilirsiniz.
Kaydedin ve paylaşın: “Kaydet ve paylaş” bölümünde mevcut ayarları kaydedin, paylaşım bağlantısı oluşturun veya mevcut CSS gradyan kodunu yapıştırarak araca aktarıp düzenlemeye devam edin.

Sık Sorulan Sorular

Cevap: Doğrusal gradyan düz bir çizgi yönünde geçiş yapar; web sayfası arka planları, düğmeler ve bannerlar için uygundur. Radyal gradyan merkez noktadan dışa doğru yayılır; spot ışığı ve katmanlı arka planlar için uygundur. Konik gradyan merkezin etrafında döner; renk çarkı, halka ve dekoratif efektler için uygundur.

Cevap: Renk durakları eklemek için “Renk ekle”ye tıklayın, ardından her biri için renk, konum yüzdesi ve saydamlığı ayarlayın. Durak konumu renk geçiş aralığını etkiler; durakları hızlıca düzenlemek için “Eşit dağıt” seçeneğini de kullanabilirsiniz.

Cevap: Tekrarlanan gradyanlar; çizgiler, dalgalar, dairesel tekrarlanan dokular gibi düzenli arka planlar oluşturmak için uygundur. Doğrusal ve radyal gradyanlarda tekrarlama modu açılabilir; konik gradyanlarda ise etkinin renk durakları ve açı ile kontrol edilmesi önerilir.

Cevap: PNG, JPG, SVG ve CSS dosyaları dışa aktarılabilir; ayrıca ZIP kaynak paketi de indirilebilir. Kaynak paketi CSS kodu, SVG dosyası, PNG görseli ve ayar JSON’unu içerir; arşivleme ve sonraki düzenlemeler için uygundur.

Cevap: Oluşturulan CSS kodunu kopyaladıktan sonra web sayfasının stil dosyasına yapıştırmanız yeterlidir. Araç; CSS sınıf adı, yalnızca bildirim ve CSS değişkenleri olmak üzere üç mod sunar, proje alışkanlıklarınıza göre seçim yapabilirsiniz.

Cevap: Evet. “Kaydet ve Paylaş” içindeki “CSS İçe Aktar” alanına linear-gradient, radial-gradient veya conic-gradient kodunu yapıştırın; “Araca Oku”ya tıkladıktan sonra renkleri, açıyı ve konumu ayarlamaya devam edebilirsiniz.

Cevap: Hayır. Gradyan oluşturma, kod kopyalama, görsel çizimi ve kaynak paketleme işlemlerinin tümü yerel olarak tamamlanır; tasarım içeriğini sunucuya yüklemeniz gerekmez.