CSS Animasyonlu Gradyan Arka Plan Oluşturucu

Dinamik gradyan arka planları çevrim içi oluşturun; birden fazla renk, animasyon yönü ve hazır şablon desteğiyle tek tıkla CSS kodu üretin

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 renkleri seçin, sonra animasyonu ayarlayın; bitince kodu kopyalayın veya indirin. Hazır şablonlar örnek olarak kullanılabilir; renkler, duraklar, yön, hız ve çıktı amacı düzenlenebilir. Tüm önizleme, oluşturma ve kayıt işlemleri bu sayfada yapılır.

Canlı önizleme CSS Keyframes Metin / Kenarlık / Arka plan Ayarlar kaydedilebilir

Renk sayısı-

Animasyon türü-

Süre-

Çıktı amacı-

Renk ayarları

Örnek bir şablonla başlamak daha hızlıdır. Renk durakları geçiş ritmini etkiler; 2-6 renk kullanmanız önerilir.

Örnek plan Tıklayınca mevcut renklerin üzerine yazar

Gradyan temeli Doğrusal web arka planları için, radyal spot efekti için, konik kenarlık veya rozet için uygundur

Gradyan türü

Gradyan açısı135°

135°

Radyal / konik merkez

Renk durakları 2 renk kalmalı, en fazla 8 renk ayarlanabilir

Animasyon ayarları

Sayfa arka planı için daha yavaş akış hızı önerilir. Hareketi azaltmak için azaltılmış hareket uyumluluk kodunu açabilirsiniz.

Animasyon türü Farklı Keyframes oluşturma mantığı seç

Hareket yönü background-position'ı etkileyen keyframe'ler

Hız ve döngü Arka plan boyutu büyüdükçe renk hareketi belirginleşir

Animasyon süresi10s

10s

Arka plan boyutu400%

400%

Animasyon eğrisi

Sonsuz döngü Gidiş-dönüş oynat Üstüne gelince duraklat Azaltılmış hareket uyumu

Oluştur ve dışa aktar

Sınıf adını ve kullanım alanını ayarlayın, CSS’i proje stil dosyasına kopyalayın ve hedef öğeye ilgili sınıfı ekleyin.

Uygulama ayarları Aynı renk paleti arka plan, metin veya kenarlık efekti oluşturabilir

CSS sınıf adı

Çıktı amacı

Kapsayıcı min. yüksekliği (px)

Köşe yarıçapı(px)

Kenarlık genişliği (px)

Kenarlık iç arka planı

Oluşturulan CSS kodu

Örnek HTML

Canlı önizleme

Animated Gradient Renk, yön ve hızı ayarladığınızda efekt anında güncellenir. Ana ekran, buton alanları, kampanya sayfaları ve görsel kartlar için uygundur. CSS Ready

Gradyan türü-

Yön-

Boyut-

Sınıf adı-

Talimatlar

Yazılım kullanım talimatları

Renk şeması seçin: “Renk ayarları” bölümünde örnek şemaya tıklayın veya renkleri ve durak noktalarını manuel olarak ekleyin, silin ya da ayarlayın.
Gradyan türünü ayarlayın: Doğrusal, radyal veya konik gradyan seçin; gerektiğinde açı ve merkez konumunu ayarlayın.
Animasyon parametrelerini yapılandırın: “Animasyon parametreleri” bölümünde akış biçimi, hareket yönü, süre, arka plan boyutu, animasyon eğrisi ve döngü biçimini ayarlayın.
Çıktı kullanımını seçin: “Oluştur ve dışa aktar” bölümünde arka plan kapsayıcısı, gradyan metin veya gradyan kenarlık seçin; CSS sınıf adı, köşe yuvarlama, kenarlık gibi parametreleri ayarlayın.
Efekti önizleyin: Sağ tarafta arka plan, kart, metin ve kenarlık önizleme modları arasında geçiş yapabilir; efekti onayladıktan sonra kodu oluşturabilirsiniz.
Kodu kopyalayın veya indirin: Kodu sayfa öğelerine uygulamak için “CSS’yi kopyala”, “HTML’yi kopyala” veya “CSS’yi indir” seçeneğine tıklayın.
Ayarları kaydedin: Mevcut parametreleri korumak ve bir sonraki düzenlemeye kolayca devam etmek için “Ayarları kaydet” seçeneğine tıklayın.

Sık sorulan sorular

Yanıt: CSS kodunu stil dosyanıza kopyalayın, ardından örnek HTML’deki sınıf adını gradyanı göstermek istediğiniz öğeye ekleyin.

Yanıt: Doğrusal gradyan sayfa arka planları ve banner’lar için uygundur; radyal gradyan spot ışığı ve yumuşak yayılma efektleri için uygundur; konik gradyan kenarlıklar, rozetler ve dönme hissi veren görseller için uygundur.

Yanıt: Arka plan boyutunu büyütebilir, renk sayısını artırabilir, renk durak noktalarını ayarlayabilir veya çapraz akış, nefes alma akışı gibi animasyon biçimlerini seçebilirsiniz.

Yanıt: Evet. Çıktı kullanımında “gradyan metin” seçildiğinde araç, background-clip:text içeren CSS kodu oluşturur.

Yanıt: Genel sayfa arka planlarında normal şekilde kullanılabilir. Sayfada çok sayıda animasyon varsa animasyon süresini uzatmanız, renk sayısını azaltmanız ve hareket efektlerini azaltma uyumluluk kodunu etkinleştirmeniz önerilir.