Penjana Kecerunan

Semua alat

Bina kecerunan CSS linear, radial dan konik dari awal dengan kawalan berbilang hentian yang boleh diseret dan praset terpilih. Salin CSS sedia tampal dengan segera.

Pratonton langsung
Praset
Jenis kecerunan
Sudut
°
Hentian warna
Seret pemegang untuk memindahkan hentian, atau klik bar untuk menambah satu. Pilih hentian untuk mengedit warnanya.
Hentian yang dipilih
%
CSS
background: —;

Semuanya dikira langsung dalam pelayar anda — tiada pendaftaran, sepenuhnya percuma.

Mengenai Penjana Kecerunan

Gradient Generator membina kecerunan CSS tersuai dari kosong. Pilih jenis linear, radial atau conic, tetapkan sudut, dan bentuk campuran dengan editor pelbagai perhentian: seret pemegang untuk menggerakkan perhentian, klik bar untuk menambah yang baharu, dan tukar warna mana-mana perhentian dengan pemilih warna — pratonton langsung dikemas kini semasa anda bekerja.

Preset terpilih memberikan titik permulaan yang kukuh apabila anda tidak mahu bermula daripada helaian kosong, dan tindakan satu klik — random, reverse, rotate 45° — menjadikan penerokaan pantas. Kod CSS yang dihasilkan sentiasa kelihatan dan kekal segerak dengan pratonton, jadi apa yang anda salin adalah tepat apa yang anda lihat.

Semuanya dikira secara langsung dalam pelayar anda tanpa kos. Salin peraturan CSS lengkap atau hanya nilai latar belakang dan tampal ke dalam helaian gaya, gaya butang atau bahagian hero — penjana kecerunan CSS yang mudah untuk latar belakang, overlay dan aksen UI.

Cara menggunakan Penjana Kecerunan

  1. Pilih jenis kecerunan: linear, radial atau conic.
  2. Mula daripada preset atau klik "Random" untuk titik permulaan segera.
  3. Seret pemegang perhentian untuk meletakkan warna, klik bar untuk menambah perhentian, dan edit warna setiap perhentian.
  4. Laraskan sudut, atau guna "Reverse" dan "Rotate 45°" untuk menyesuaikan semula campuran.
  5. Salin peraturan CSS atau nilai latar belakang dan tampal ke dalam projek anda.

Soalan lazim

Ya. Alat ini sepenuhnya di bahagian klien — tiada pendaftaran, tiada kredit dan tiada had ke atas berapa banyak kecerunan yang anda bina atau salin.

Kecerunan linear mencampurkan warna sepanjang garis lurus pada sudut pilihan anda. Kecerunan radial memancar ke luar daripada titik tengah dalam bentuk bulatan. Kecerunan conic mengimbas warna sekeliling titik tengah seperti carta pai, sesuai untuk roda warna dan gelang kemajuan.

Kecerunan memerlukan sekurang-kurangnya dua perhentian, dan anda boleh terus klik bar untuk menambah lagi. Setiap perhentian mempunyai warna dan kedudukan boleh seret sendiri, jadi campuran pelbagai warna yang kompleks mudah dibina.

Kecerunan linear dan radial disokong di mana-mana. Kecerunan conic disokong dalam semua pelayar moden tetapi tidak dalam yang sangat lama, jadi sediakan warna latar belakang sandaran jika anda perlu menyokong versi lama.

Ya — guna alat rakan Gradient Generator from Image, yang mengekstrak warna dominan gambar yang dimuat naik dan menukarnya menjadi perhentian kecerunan boleh edit. Alat ini adalah rakan sebanding dari-kosong.
Kongsi ini
Alat Berkaitan
Penjana Kecerunan daripada Imej Ekstrak kecerunan yang indah daripada sebarang foto — lepaskan imej, pilih suasana, dan warna dominan menjadi hentian kecerunan yang boleh diseret. Salin CSS sedia tampal dengan segera. Percuma
Penjana Palet Warna Bina palet warna yang harmoni daripada roda warna interaktif — gunakan peraturan harmoni seperti analogus, komplementari atau triad, kemudian salin sebarang nilai dengan segera. Percuma
Pencampur Warna Campurkan warna mula ke warna akhir merentasi sehingga 10 langkah — pratonton kecerunan, ambil setiap warna dan salin sebarang format dengan segera. Percuma
Penjana Warna Cerah & Gelap Jana julat penuh tint dan warna gelap daripada satu warna — pilih langkah cerah/gelap dan bilangan warna, kemudian salin sebarang nilai dengan segera. Percuma
Pencari Warna Bernama Cari warna CSS bernama yang paling hampir dan warna Tailwind yang paling dekat untuk sebarang warna — dipadankan secara perseptual, dengan nilai sedia salin. Percuma
Simulator Buta Warna Lihat imej atau palet anda seperti yang dilihat oleh orang dengan protanopia, deuteranopia, tritanopia atau akromatopsia — berjalan sepenuhnya dalam pelayar anda, tiada apa yang dimuat naik. Percuma
Carian popular
penjana kecerunan pembuat kecerunan css penjana linear gradient pembuat radial gradient conic gradient css penjana kecerunan percuma
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.