Generator Latar Belakang Gradien Online

Pratinjau efek gradien CSS secara real-time, mendukung gradien linear, radial, dan kerucut; hasilkan kode dan ekspor gambar 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

Atur gradien dulu, lalu salin kode atau ekspor gambar. Mendukung gradien linear, radial, kerucut, berulang, dan multi-stop; perubahan parameter disinkronkan ke pratinjau kanan.

Atur gradien

Pilih jenis gradien dulu, lalu atur arah dan stop warna. Sebaiknya urutkan stop warna dari kecil ke besar.

Jenis gradienGradien kerucut cocok untuk roda warna sudut dan latar cincin

Arah & bentukGradien linear dapat memakai sudut atau arah cepat

Sudut linear90°

Periode ulang32%

Bentuk radial

Jangkauan sebar

Periode ulang32%

Pusat X50%

Pusat Y50%

Sudut awal0°

Pusat X50%

Pusat Y50%

Ulangi gradasi Lapisan soft light Vinyet Tekstur halus

Titik warnaMendukung 2-10 titik, dapat atur opasitas dan posisi

Template contohDapat dijadikan titik awal palet untuk disesuaikan

Ekspor kode

Setelah pratinjau sesuai, salin CSS atau ekspor file PNG, JPG, SVG, CSS, dan paket aset.

Format kodePilih cara deklarasi sesuai skenario dev

Mode kode

Nama kelas / variabel

Sertakan warna latar fallback Kompres kode

Kode CSS

Dimensi GambarUkuran kustom dipakai untuk ekspor gambar dan SVG

Preset ukuran

Kualitas JPG92%

Lebar(px)

Tinggi(px)

Unduh asetPaket aset berisi CSS, SVG, PNG, dan JSON pengaturan

Pratinjau langsung

Gradient Preview Diperbarui langsung setelah parameter diubah

JenisLinear

Titik warna2

Ukuran ekspor1920x1080

Panjang kode0

Petunjuk

Petunjuk Penggunaan Perangkat Lunak

Atur jenis gradien:Pilih gradien linear, gradien radial, atau gradien kerucut. Linear cocok untuk banner dan latar belakang web, radial cocok untuk efek penyebaran dari pusat, sedangkan kerucut cocok untuk bentuk cincin, palet warna, dan pola dekoratif.
Sesuaikan arah dan bentuk:
- Gradien linear:Dapat menggunakan tombol arah, atau mengatur arah 0-360 derajat melalui slider sudut.
- Gradien radial:Dapat mengatur bentuk lingkaran atau elips, jangkauan penyebaran, serta posisi titik pusat X/Y.
- Gradien kerucut:Dapat mengatur sudut awal dan posisi titik pusat.
Konfigurasikan titik warna:Gunakan pemilih warna, kolom input HEX, persentase posisi, dan parameter transparansi untuk mengontrol setiap titik warna. Anda dapat menambah, menghapus, mengurutkan, membalik warna, serta mendistribusikan titik secara merata dengan sekali klik.
Gunakan opsi efek:Dapat mengaktifkan gradien berulang, lapisan soft light, vignette, dan tekstur halus agar latar belakang lebih cocok untuk hero section web, kartu, poster, dan materi desain.
Salin dan ekspor:Di “Ekspor Kode”, pilih nama kelas CSS, hanya deklarasi, atau mode variabel CSS. Anda dapat menyalin kode CSS, serta mengekspor file PNG, JPG, SVG, CSS, dan paket sumber daya ZIP.
Simpan dan bagikan:Di “Simpan Bagikan”, simpan pengaturan saat ini, buat tautan berbagi, atau tempel kode gradien CSS yang sudah ada untuk dibaca ke dalam alat dan melanjutkan pengeditan.

Pertanyaan Umum

J: Gradien linearbertransisi sepanjang arah garis lurus, cocok untuk latar belakang web, tombol, dan banner; gradien radialmenyebar keluar dari titik pusat, cocok untuk efek sorotan dan latar berlapis; gradien kerucutberputar mengelilingi pusat, cocok untuk palet warna, bentuk cincin, dan efek dekoratif.

J: Klik “Tambah Warna” untuk menambahkan titik warna, lalu atur warna, persentase posisi, dan transparansi masing-masing. Posisi titik akan memengaruhi rentang transisi warna, dan Anda juga dapat menggunakan “Distribusi Merata” untuk merapikan titik dengan cepat.

Jawab: Gradien berulang cocok untuk membuat latar berpola teratur seperti garis-garis, gelombang, dan tekstur berulang melingkar. Gradien linear dan radial dapat mengaktifkan mode berulang, sedangkan untuk gradien kerucut disarankan mengontrol efek melalui titik warna dan sudut.

Jawab: Anda dapat mengekspor file PNG, JPG, SVG, CSS, serta mengunduh paket sumber daya ZIP. Paket sumber daya berisi kode CSS, file SVG, gambar PNG, dan JSON pengaturan, sehingga mudah untuk diarsipkan dan diedit kembali.

Jawab: Setelah menyalin kode CSS yang dihasilkan, tempelkan ke file gaya halaman web. Alat ini menyediakan tiga mode: nama kelas CSS, hanya deklarasi, dan variabel CSS, yang dapat dipilih sesuai kebiasaan proyek.

Jawab: Bisa. Tempelkan kode linear-gradient, radial-gradient, atau conic-gradient di area “Impor CSS” pada “Simpan Bagikan”, lalu klik “Baca ke alat” untuk melanjutkan penyesuaian warna, sudut, dan posisi.

Jawab: Tidak. Pembuatan gradien, penyalinan kode, penggambaran gambar, dan pengemasan sumber daya semuanya dilakukan secara lokal, tanpa perlu mengunggah konten desain ke server.