Generator Latar Belakang Gradasi Animasi CSS

Buat latar belakang gradien dinamis secara online, mendukung berbagai warna, arah animasi, dan preset, serta menghasilkan kode CSS dengan sekali klik

Laporan bug

Mode eksekusi browser: Data Anda diproses di browser dan tidak diunggah ke server.

Kecepatan dan stabilitas: Kecepatan pemrosesan bergantung pada perangkat dan browser Anda. Untuk pekerjaan batch besar, versi desktop mungkin lebih stabil.

Memuat alat, harap tunggu...

Jika alat online tidak dapat dimuat atau dijalankan, coba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Pilih skema warna, atur animasi, lalu salin atau unduh kode. Preset bisa langsung dipakai sebagai contoh, atau diedit lagi: warna, stop, arah, kecepatan, dan tujuan output. Semua pratinjau, pembuatan, dan penyimpanan ada di halaman ini.

Pratinjau langsung CSS Keyframes Teks / Border / Latar Pengaturan tersimpan

Jumlah warna-

Mode animasi-

Durasi-

Tujuan output-

Pengaturan warna

Mulai dari contoh akan lebih cepat. Stop warna memengaruhi ritme transisi gradasi; disarankan gunakan 2-6 warna.

Contoh skema Klik untuk menimpa warna saat ini

Dasar gradasi Linear cocok untuk latar web, radial untuk efek sorot, conic untuk border atau badge

Jenis gradien

Sudut gradasi135°

135°

Pusat radial / conic

Stop warna Minimal 2 warna, maks. 8 warna

Parameter animasi

Disarankan aliran lambat untuk latar halaman. Untuk mengurangi efek, aktifkan kode kompatibilitas kurangi gerakan.

Mode animasi Pilih logika pembuatan Keyframes berbeda

Arah gerak Keyframe yang memengaruhi background-position

Kecepatan & loop Makin besar ukuran latar, makin jelas gerak warna

Durasi animasi10s

10s

Ukuran latar400%

400%

Kurva animasi

Loop tanpa batas Putar bolak-balik Jeda saat hover Kompatibilitas kurangi gerakan

Buat & ekspor

Setelah mengatur nama kelas dan skenario, salin CSS ke file gaya proyek, lalu tambahkan nama kelas ke elemen target.

Pengaturan aplikasi Satu skema warna dapat membuat efek latar, teks, atau border

Nama kelas CSS

Tujuan output

Tinggi min. kontainer (px)

Sudut Bulat(px)

Lebar border (px)

Latar dalam border

Kode CSS yang dibuat

Contoh HTML

Pratinjau langsung

Animated Gradient Setelah warna, arah, dan kecepatan disesuaikan, efek akan langsung diperbarui. Cocok untuk hero web, area tombol, latar halaman promo, dan kartu visual. CSS Ready

Jenis gradien-

Orientasi-

Ukuran-

Nama kelas-

Petunjuk

Petunjuk Penggunaan Perangkat Lunak

Pilih skema warna: Di “Pengaturan Warna”, klik contoh skema, atau tambahkan, hapus, sesuaikan warna dan titik henti secara manual.
Atur jenis gradien: Pilih gradien linear, radial, atau kerucut, lalu sesuaikan sudut dan posisi pusat sesuai kebutuhan.
Konfigurasi parameter animasi: Di “Parameter Animasi”, atur mode aliran, arah gerakan, durasi, ukuran latar belakang, kurva animasi, dan mode pengulangan.
Pilih tujuan output: Di “Buat dan Ekspor”, pilih wadah latar belakang, teks gradien, atau batas gradien, lalu atur nama kelas CSS, sudut membulat, batas, dan parameter lainnya.
Pratinjau efek: Di sisi kanan, Anda dapat beralih antara mode pratinjau latar belakang, kartu, teks, dan batas. Pastikan efeknya sesuai sebelum membuat kode.
Salin atau unduh kode: Klik “Salin CSS”, “Salin HTML”, atau “Unduh CSS” untuk menerapkan kode ke elemen halaman.
Simpan pengaturan: Klik “Simpan Pengaturan” untuk menyimpan parameter saat ini agar mudah dilanjutkan pada pengeditan berikutnya.

Pertanyaan Umum

Jawab: Salin kode CSS ke file gaya, lalu tambahkan nama kelas dari contoh HTML ke elemen yang ingin menampilkan gradien.

Jawab: Gradien linear cocok untuk latar belakang halaman dan banner; gradien radial cocok untuk efek sorotan dan sebaran lembut; gradien kerucut cocok untuk batas, lencana, dan visual dengan kesan berputar.

Jawab: Anda dapat memperbesar ukuran latar belakang, menambah jumlah warna, menyesuaikan titik henti warna, atau memilih mode animasi seperti aliran diagonal atau aliran bernapas.

Jawab: Bisa. Pilih “Teks Gradien” pada tujuan output, dan alat akan menghasilkan kode CSS yang berisi background-clip:text.

Jawab: Umumnya dapat digunakan secara normal sebagai latar belakang halaman. Jika halaman memiliki banyak animasi, disarankan untuk memperpanjang durasi animasi, mengurangi jumlah warna, dan mengaktifkan kode kompatibilitas untuk mengurangi efek gerakan.