Penjana Kecerunan daripada Imej

Semua alat

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.

Seret & lepas imej di sini

atau klik untuk semak imbas — anda juga boleh tampal daripada papan klip anda

Semuanya berjalan dalam pelayar anda — imej anda tidak pernah dimuat naik, tiada pendaftaran, sepenuhnya percuma.

Imej sumber
Membaca warna…
Imej sumber
Suasana
Warna yang diekstrak
Ini adalah warna dominan yang ditarik daripada imej anda. Klik swatch untuk menyalinnya, atau seret hentian di bawah untuk laraskan halus kecerunan.
Pratonton kecerunan
Jenis kecerunan
Sudut
°
Hentian warna
Seret pemegang untuk mengubah kedudukan hentian, atau klik bar untuk menambah satu. Pilih hentian untuk mengedit warnanya.
Hentian yang dipilih
%
CSS
background: —;

Mengenai Penjana Kecerunan daripada Imej

Gradient Generator from Image menukar mana-mana foto menjadi kecerunan CSS sedia guna. Lepaskan, layari atau tampal imej dan alat ini membacanya pada kanvas, mengekstrak warna dominannya dan menyusunnya sebagai perhentian kecerunan yang boleh anda seret, tukar warna dan susun semula sehingga campuran itu sepadan dengan suasana imej asal.

Pemilih suasana — Colorful, Bright, Muted, Deep atau Dark — menukar warna terekstrak mana yang menjadi perhentian, jadi satu foto boleh menghasilkan beberapa kecerunan yang sangat berbeza. Anda mengawal jenis kecerunan (linear, radial atau conic), sudut, dan perhentian itu sendiri: klik bar untuk menambah satu, seret untuk menempatkan semula, terbalik atau putar dengan satu klik.

Keseluruhan proses berjalan dalam pelayar anda; imej anda tidak sesekali dimuat naik ke pelayan. Apabila pratonton kelihatan tepat, salin peraturan CSS lengkap, hanya nilai latar belakang, atau warna terekstrak itu sendiri — sesuai untuk bahagian hero, latar belakang laman dan visual jenama yang diperoleh daripada fotografi.

Cara menggunakan Penjana Kecerunan daripada Imej

  1. Seret dan lepaskan imej, klik untuk melayari, atau tampal satu daripada papan keratan anda.
  2. Pilih suasana — Colorful, Bright, Muted, Deep atau Dark — untuk memilih warna terekstrak mana yang menjadi perhentian.
  3. Pilih jenis kecerunan (linear, radial atau conic) dan laraskan sudut.
  4. Seret perhentian warna untuk menala halus campuran; tambah, buang, terbalik atau susun semula perhentian mengikut keperluan.
  5. Klik "Copy CSS" untuk mendapatkan kod kecerunan sedia tampal.

Soalan lazim

Tidak. Imej dibaca terus ke dalam kanvas dalam pelayar anda, dan pengekstrakan warna serta pengiraan kecerunan semuanya berlaku secara tempatan. Tiada apa yang meninggalkan peranti anda pada bila-bila masa.

Ya, sepenuhnya. Kerana semuanya berjalan di bahagian klien tiada kredit, akaun atau had — ekstrak kecerunan daripada seberapa banyak imej yang anda mahu.

Alat ini bermula daripada foto: ia mengekstrak warna dominan imej dan membina kecerunan daripadanya. Gradient Generator biasa bermula dari kosong dengan warna yang anda pilih sendiri. Kedua-duanya menghasilkan jenis CSS boleh edit dan sedia salin yang sama.

Suasana menyusun semula warna yang diekstrak daripada imej anda: Colorful mengutamakan rona terang yang pelbagai, Bright memilih ton cerah tepu, Muted memilih yang lebih lembut dan kurang tepu, manakala Deep dan Dark menarik warna yang lebih kaya dan gelap. Menukar suasana membina semula perhentian kecerunan serta-merta.

Ya. Setiap perhentian boleh diseret, anda boleh klik bar untuk menambah perhentian atau membuang yang dipilih, tukar warna mana-mana perhentian, tukar antara linear, radial dan conic, putar sudut dalam langkah 45°, terbalikkan arah, atau susun semula warna baharu daripada imej.
Kongsi ini
Alat Berkaitan
Penjana Kecerunan 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. Percuma
Pengekstrak Warna Imej Tarik palet warna yang halus dan sedia salin daripada sebarang imej. 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
Skrin Biru Penuh Penuhi seluruh skrin anda dengan biru tulen untuk menguji saluran sub-pixel biru dan mendedahkan piksel mati pada medan berwarna. Percuma dan berjalan dalam pelayar anda. Percuma
Skrin Hijau Penuh Penuhi seluruh skrin anda dengan hijau tulen untuk menguji saluran sub-pixel hijau, mendedahkan piksel mati atau gunakan sebagai latar chroma-key yang pantas. Percuma. Percuma
Skrin Hitam Penuh Penuhi seluruh skrin anda dengan hitam tulen — sesuai untuk mengesan piksel tersangkut yang terang, memeriksa kebocoran lampu latar atau sebagai latar gelap tanpa gangguan. Percuma. Percuma
Carian popular
kecerunan daripada imej ekstrak kecerunan dari foto imej ke kecerunan css penjana kecerunan foto cipta kecerunan dari gambar kecerunan css dari imej
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.