Penjana Latar Belakang Gradien Dalam Talian

Pratonton kesan kecerunan CSS secara masa nyata, menyokong kecerunan linear, radial dan konik, jana kod dan eksport imej dengan satu klik

Laporan pepijat

Mod pelaksanaan pelayar: Data anda diproses dalam penyemak imbas dan tidak dimuat naik ke pelayan.

Kelajuan dan kestabilan: Kelajuan pemprosesan bergantung pada peranti dan pelayar anda. Untuk kerja kelompok besar, versi desktop mungkin lebih stabil.

Memuatkan alat, sila tunggu...

Jika alat dalam talian tidak dapat dimuatkan atau dijalankan, cuba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Tetapkan kecerunan dahulu, kemudian salin kod atau eksport imej. Menyokong kecerunan linear, jejari, kon, berulang dan hentian berbilang warna; perubahan parameter disegerakkan ke pratonton kanan.

Tetapkan kecerunan

Pilih jenis kecerunan dahulu, kemudian laraskan arah dan hentian warna. Hentian warna disaran diatur dari kecil ke besar.

Jenis kecerunanKecerunan kon sesuai untuk roda warna sudut dan latar gelang

Arah dan bentukKecerunan linear boleh guna sudut atau arah pintas

Sudut linear90°

Kitaran ulang32%

Bentuk jejari

Julat sebaran

Kitaran ulang32%

Pusat X50%

Pusat Y50%

Sudut mula0°

Pusat X50%

Pusat Y50%

Kecerunan berulang Lapisan lembut Vignet Tekstur halus

Nod warnaSokong 2-10 nod, boleh tetapkan ketelusan dan posisi

Templat contohBoleh jadi titik mula skema warna

Eksport kod

Selepas pratonton disahkan, salin CSS atau eksport fail PNG, JPG, SVG, CSS dan pek aset.

Format kodPilih deklarasi mengikut senario dev

Mod kod

Nama kelas / pemboleh ubah

Sertakan warna latar sandaran Mampatkan kod

Kod CSS

Dimensi imejSaiz tersuai digunakan untuk eksport imej dan SVG

Pratetap saiz

Kualiti JPG92%

Lebar(px)

Tinggi(px)

Muat turun asetPek aset mengandungi CSS, SVG, PNG dan tetapan JSON

Pratonton langsung

Gradient Preview Kemas kini segera selepas ubah parameter

JenisLinear

Nod warna2

Saiz eksport1920x1080

Panjang kod0

Arahan

Arahan Penggunaan Perisian

Tetapkan jenis kecerunan:Pilih kecerunan linear, kecerunan jejari atau kecerunan kon. Linear sesuai untuk sepanduk dan latar belakang laman web, jejari sesuai untuk kesan sebaran dari pusat, manakala kon sesuai untuk bentuk cincin, roda warna dan corak hiasan.
Laraskan arah dan bentuk:
- Kecerunan linear:Anda boleh menggunakan butang arah, atau menetapkan arah 0-360 darjah melalui peluncur sudut.
- Kecerunan jejari:Anda boleh menetapkan bentuk bulat atau elips, julat sebaran, serta kedudukan titik pusat X/Y.
- Kecerunan kon:Anda boleh menetapkan sudut permulaan dan kedudukan titik pusat.
Konfigurasikan nod warna:Gunakan pemilih warna, kotak input HEX, peratusan kedudukan dan parameter ketelusan untuk mengawal setiap nod warna. Anda boleh menambah, memadam, menyusun, membalikkan warna, serta mengagihkan nod secara sekata dengan satu klik.
Gunakan pilihan kesan:Anda boleh menghidupkan kecerunan berulang, lapisan cahaya lembut, vignette dan tekstur halus untuk menjadikan latar belakang lebih sesuai bagi bahagian pertama laman web, kad, poster dan bahan reka bentuk.
Salin dan eksport:Dalam “Eksport Kod”, pilih nama kelas CSS, mod pengisytiharan sahaja atau pemboleh ubah CSS. Anda boleh menyalin kod CSS, atau mengeksport fail PNG, JPG, SVG, CSS dan pakej sumber ZIP.
Simpan dan kongsi:Dalam “Simpan Kongsi”, simpan tetapan semasa, jana pautan perkongsian, atau tampal kod kecerunan CSS sedia ada ke dalam alat untuk meneruskan penyuntingan.

Soalan Lazim

J: Kecerunan linearberalih mengikut arah garis lurus, sesuai untuk latar belakang laman web, butang dan sepanduk; kecerunan jejarimerebak keluar dari titik pusat, sesuai untuk kesan sorotan dan latar belakang berlapis; kecerunan konberputar mengelilingi pusat, sesuai untuk roda warna, bentuk cincin dan kesan hiasan.

J: Klik “Tambah Warna” untuk menambah nod warna, kemudian tetapkan warna, peratusan kedudukan dan ketelusan masing-masing. Kedudukan nod akan mempengaruhi julat peralihan warna, dan anda juga boleh menggunakan “Agih Sekata” untuk menyusun nod dengan cepat.

Jawapan: Kecerunan berulang sesuai untuk membuat latar belakang berpola seperti jalur, riak dan tekstur berulang berbentuk cincin. Kecerunan linear dan radial boleh mengaktifkan mod berulang, manakala kecerunan kon disarankan dikawal melalui nod warna dan sudut.

Jawapan: Anda boleh mengeksport fail PNG, JPG, SVG dan CSS, serta memuat turun pakej sumber ZIP. Pakej sumber mengandungi kod CSS, fail SVG, imej PNG dan tetapan JSON, memudahkan pengarkiban dan penyuntingan semula.

Jawapan: Selepas menyalin kod CSS yang dijana, tampalkannya ke dalam fail gaya laman web. Alat ini menyediakan tiga mod: nama kelas CSS, deklarasi sahaja dan pemboleh ubah CSS, yang boleh dipilih mengikut kebiasaan projek.

Jawapan: Boleh. Tampalkan kod linear-gradient, radial-gradient atau conic-gradient di kawasan “Import CSS” dalam “Simpan Kongsi”, kemudian klik “Baca ke alat” untuk terus melaraskan warna, sudut dan kedudukan.

Jawapan: Tidak. Penjanaan kecerunan, penyalinan kod, pelukisan imej dan pembungkusan sumber semuanya dilakukan secara setempat, tanpa perlu memuat naik kandungan reka bentuk ke pelayan.