Bina kecerunan CSS linear, radial dan konik dengan pelbagai hentian warna dan salin kodnya.

Pratonton
Output CSS
background: ;

Semuanya berjalan dalam pelayar anda — tiada muat naik, tiada pendaftaran.

Jenis kecerunan
deg
Hentian warna Klik bar untuk menambah hentian, seret untuk mengalih
Hentian dipilih
Warna hentian
100%
%
Pratetap

Mengenai Penjana Kecerunan CSS

CSS Gradient Generator membina kecerunan linear, radial dan konik dengan kawalan visual penuh. Tambah noktah warna dengan mengklik bar kecerunan, seret untuk mengalihkan kedudukannya, dan berikan setiap noktah warna, kelegapan dan kedudukannya sendiri. Kecerunan linear mendapat kawalan sudut; radial mendapat bentuk (bulatan atau elips) dan kedudukan; konik mendapat sudut permulaan.

Pratonton langsung menunjukkan tepat apa yang pelayar akan paparkan, dan butang rawak serta satu set pratetap terpilih tersedia apabila anda memerlukan titik permulaan berbanding kanvas kosong. Noktah boleh ditambah dan dibuang dengan bebas — kecerunan hanya memerlukan sekurang-kurangnya dua.

Apabila ia kelihatan betul, salin nilai kecerunan semata-mata atau peraturan CSS lengkap. Penjana ini berjalan sepenuhnya di pelayar anda tanpa muat naik dan tanpa pendaftaran, menjadikannya rakan pantas untuk butang, latar belakang hero, sempadan dan kesan teks.

Cara menggunakan Penjana Kecerunan CSS

  1. Pilih jenis kecerunan: linear, radial atau konik.
  2. Tetapkan sudut (linear), bentuk dan kedudukan (radial), atau sudut permulaan (konik).
  3. Klik bar kecerunan untuk menambah noktah warna dan seret ke kedudukannya.
  4. Berikan setiap noktah warna, kelegapan dan kedudukan tepatnya.
  5. Cuba pratetap atau butang rawak untuk inspirasi pantas.
  6. Salin nilai kecerunan atau peraturan CSS penuh.

Soalan lazim

Kecerunan linear mencampurkan warna sepanjang garis lurus pada satu sudut. Kecerunan radial memancar keluar daripada titik pusat sebagai bulatan atau elips. Kecerunan konik menyapu warna di sekeliling titik pusat — jenis di sebalik carta pai dan roda warna.

Sekurang-kurangnya dua, tanpa had atas yang praktikal. Dua atau tiga noktah menghasilkan latar belakang bersih; noktah yang rapat menghasilkan jalur warna tegas, iaitu cara kesan berjalur dan bersegmen dibina.

Ya — setiap noktah mempunyai kawalan kelegapannya sendiri. Noktah pada kelegapan 0% memudarkan kecerunan itu, iaitu cara standard untuk mencampurkan lapisan bertona ke dalam foto atau memudarkan bahagian hero ke latar belakang halaman.

Tidak secara langsung — pelayar tidak boleh membuat peralihan antara nilai kecerunan. Helah biasa: animasikan background-position atas kecerunan bersaiz besar, putarkan kecerunan konik dengan sifat tersuai, atau silang-pudar dua elemen berlapis.

Ya, percuma dan tanpa had. Ia berjalan sepenuhnya di pelayar anda, jadi tiada apa yang anda reka bentuk disimpan atau dihantar.


Carian popular
penjana kecerunan css penjana css kecerunan linear kecerunan radial css kecerunan konik css pembuat kecerunan latar css alat hentian warna kecerunan pemilih sudut kecerunan css penjana kecerunan dalam talian
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.