Penukar Percuma

Kecerunan CSS Penjana

Menjana kecerunan CSS secara visual dengan pratonton langsung. Cipta kecerunan linear, jejari dan kon dengan hentian warna tersuai — percuma dan sebelah pelanggan.

Pratonton Langsung
Output CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
sudut (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Tentang alat ini

Cipta kecerunan linear dan jejari CSS yang cantik dengan editor visual. Pilih warna, laraskan hentian, tukar arah atau sudut dan lihat kemas kini pratonton langsung dalam masa nyata. Salin kod CSS yang dijana — termasuk awalan vendor untuk penyemak imbas lama — dan tampalkannya terus ke dalam lembaran gaya anda.

Cara menggunakan

  1. Pilih jenis kecerunan: linear atau jejari.
  2. Tambahkan hentian warna dengan mengklik bar kecerunan dan memilih warna.
  3. Laraskan sudut kecerunan (linear) atau kedudukan (jejari) menggunakan kawalan.
  4. Salin kod CSS yang dijana daripada panel output.

Soalan lazim

Adakah kecerunan CSS berfungsi dalam semua pelayar?
Kecerunan CSS moden (kecerunan linear, kecerunan jejari) disokong dalam semua penyemak imbas semasa termasuk Chrome, Firefox, Safari dan Edge. Alat ini boleh menjana awalan -webkit- untuk versi penyemak imbas yang lebih lama.
Bolehkah saya mencipta kecerunan berbilang warna?
ya. Tambah seberapa banyak hentian warna yang anda perlukan. Anda juga boleh melaraskan kedudukan setiap perhentian untuk mengawal tempat warna bercantum. Ini membolehkan pelangi kompleks, matahari terbenam atau kecerunan jenama tersuai.
Apakah perbezaan antara kecerunan linear dan jejari?
Warna peralihan kecerunan linear sepanjang garis lurus (atas ke bawah, kiri ke kanan, pepenjuru atau mana-mana sudut). Kecerunan jejari mengalihkan warna keluar dari titik tengah dalam bentuk bulat atau elips.
Bolehkah saya menggunakan kecerunan sebagai latar belakang untuk teks?
ya. Gunakan latar belakang-klip: teks dengan -webkit-text-fill-color: lutsinar untuk menggunakan kecerunan pada teks. CSS yang dijana menyediakan definisi kecerunan — menggabungkannya dengan sifat ini untuk teks kecerunan.