Penjana Kecerunan

Bina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.

Jenis kecerunan
Hentian warna
CSS
Laraskan hentian dan arah untuk membentuk kecerunan anda.

Setiap kecerunan dipaparkan terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Apakah perbezaan antara kecerunan linear, jejarian dan konik?

Kecerunan linear mengadun warna di sepanjang garis lurus yang anda halakan dengan sudut. Kecerunan jejarian menyebarkannya ke luar dari pusat dalam bulatan atau elips. Kecerunan konik menyapu warna di sekeliling pusat seperti roda warna.

Apakah itu hentian warna?

Setiap hentian warna ialah warna yang disematkan pada kedudukan di sepanjang kecerunan — 0% pada permulaan, 100% pada penghujung. Alihkan hentian untuk beralih ke tempat puncak warnanya, atau tambah lebih banyak hentian untuk adunan yang lebih kaya. Anda boleh menggunakan sehingga lapan hentian.

Bagaimanakah cara saya mengawal arah?

Untuk kecerunan linear atau konik, gelongsor sudut menetapkan arah — 0° menghala ke atas, 90° menghala ke kanan. Kecerunan jejarian tidak mempunyai sudut; pilih bentuk bulatan atau elips untuk menukar cara ia merebak.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Pengenalan kepada Penjana Kecerunan

Penjana Kecerunan ialah alat dalam talian yang membolehkan anda mencipta kecerunan CSS dengan memilih jenis kecerunan, melaraskan arah atau bentuknya, dan menambah sehingga lapan hentian warna. Semasa anda melakukan perubahan pada tetapan yang disediakan, anda boleh melihat pratonton langsung bagi kecerunan tersebut secara terus dan menyalin kod CSS yang dihasilkan dengan satu klik mudah.

Alat ini sangat berguna untuk pelbagai golongan pengguna. Seseorang yang ingin mencipta latar belakang CSS boleh memanfaatkan alat ini dengan mudah. Ia juga memenuhi keperluan pengguna yang hanya perlu melaraskan dua warna dan satu arah untuk kecerunan mereka. Bagi pereka atau pembangun laman web (front-end developer) yang memerlukan kawalan lebih mendalam, alat ini membolehkan mereka melaraskan jenis, kedudukan, dan berbilang hentian warna untuk menghasilkan kecerunan yang tepat.

Kecerunan awal yang dipaparkan apabila anda membuka alat ini merangkumi dua hentian warna, iaitu #6366f1 pada kedudukan 0% dan #ec4899 pada kedudukan 100%.

Memahami Jenis Kecerunan: Linear, Jejarian, dan Konik

Di dalam bahagian Jenis kecerunan, anda boleh memilih antara tiga jenis kecerunan utama yang disokong oleh CSS:

  • Linear (Linear): Kecerunan linear mengadun warna di sepanjang garis lurus, di mana sudut yang anda tetapkan akan menentukan arah aliran warna tersebut.
  • Jejarian: Kecerunan jejarian menyebarkan warna ke luar dari titik pusat dalam bentuk bulatan atau elips.
  • Konik: Kecerunan konik menyapu warna di sekeliling titik pusat seperti roda warna.

Setiap jenis kecerunan ini memberikan kesan visual yang berbeza untuk reka bentuk laman web anda, bergantung kepada bagaimana anda mahu warna-warna tersebut diadun dan dipaparkan.

Mengawal Arah dan Bentuk Kecerunan

Untuk menentukan bagaimana kecerunan anda mengalir, alat ini menyediakan kawalan khusus berdasarkan jenis kecerunan yang anda pilih:

Sudut untuk Kecerunan Linear dan Konik

Bagi kecerunan Linear dan Konik, anda boleh melaraskan Sudut menggunakan nilai berangka. Gelongsor sudut ini menetapkan arah aliran warna, di mana sudut 0° menghala tepat ke atas, manakala sudut 90° menghala ke kanan.

Bentuk untuk Kecerunan Jejarian

Kecerunan Jejarian tidak menggunakan tetapan sudut. Sebaliknya, anda akan diberikan pilihan Bentuk untuk menentukan bagaimana warna disebarkan dari pusat. Anda boleh memilih sama ada bentuk Elips atau Bulatan.

Menguruskan Hentian Warna

Hentian warna ialah warna khusus yang disematkan pada kedudukan tertentu di sepanjang laluan kecerunan. Kedudukan ini dinyatakan dalam bentuk peratusan, bermula dari 0% pada titik permulaan sehingga 100% pada titik penghujung kecerunan.

Berikut adalah aturan penting dalam menguruskan hentian warna melalui alat ini:

  • Had Maksimum: Anda boleh menggunakan sehingga lapan hentian warna untuk satu kecerunan.
  • Tambah Hentian: Anda boleh menambah hentian warna baharu dengan mengklik butang Tambah hentian. Setiap hentian warna baharu yang ditambah akan diletakkan pada kedudukan lalai iaitu 50%.
  • Butang Disekat: Apabila anda sudah mempunyai cukup lapan hentian warna pada kecerunan anda, butang Tambah hentian akan dinyahaktifkan secara automatik.
  • Setiap Hentian: Bagi setiap hentian warna yang aktif, anda boleh menetapkan Warna hentian (nilai warna) dan Kedudukan (peratusan dari 0% hingga 100%) secara individu.

Menyalin Kod CSS dan Melihat Pratonton

Alat ini dilengkapi dengan fungsi CSS yang menjana kod secara automatik berdasarkan konfigurasi yang anda lakukan.

  • Pratonton Langsung: Anda akan melihat representasi visual secara langsung bagi kecerunan yang sedang direka semasa anda mengubah jenis, sudut, bentuk, atau hentian warna.
  • Salin CSS: Sebaik sahaja anda berpuas hati dengan hasil kecerunan, anda boleh mengklik butang Salin CSS. Selepas butang tersebut diklik, keadaan butang akan bertukar kepada status disalin untuk menunjukkan bahawa kod CSS telah berjaya disalin ke papan klip anda.

Privasi dan Pemprosesan Data

Kami mengutamakan privasi anda semasa menggunakan alat ini. Setiap kecerunan dipaparkan terus dalam penyemak imbas anda. Tiada apa-apa data atau tetapan kecerunan yang anda tetapkan di dalam alat ini akan dimuat naik ke pelayan BroBroGo. Semua proses penjanaan kod dan paparan visual berlaku secara lokal pada peranti anda sendiri.

Soalan Lazim (FAQ)

S: Apakah perbezaan antara kecerunan linear, jejarian dan konik?
J: Kecerunan linear mengadun warna di sepanjang garis lurus yang anda halakan dengan sudut. Kecerunan jejarian menyebarkannya ke luar dari pusat dalam bulatan atau elips. Kecerunan konik menyapu warna di sekeliling pusat seperti roda warna.

S: Apakah itu hentian warna?
J: Setiap hentian warna ialah warna yang disematkan pada kedudukan di sepanjang kecerunan — 0% pada permulaan, 100% pada penghujung. Alihkan hentian untuk beralih ke tempat puncak warnanya, atau tambah lebih banyak hentian untuk adunan yang lebih kaya. Anda boleh menggunakan sehingga lapan hentian.

S: Bagaimanakah cara saya mengawal arah?
J: Untuk kecerunan linear atau konik, gelongsor sudut menetapkan arah — 0° menghala ke atas, 90° menghala ke kanan. Kecerunan jejarian tidak mempunyai sudut; pilih bentuk bulatan atau elips untuk menukar cara ia merebak.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana Box ShadowSeret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.Penjana Border RadiusBulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana CSS GridTetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV, CMYK dan LAB — edit mana-mana medan dan yang lain akan dikemas kini semasa anda menaip.Alat Perkemas & Kecilkan CSSSusun semula inden CSS yang berselerak untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan mod selamat yang tidak akan mengubah susunan peraturan anda.Pemeriksa KontrasMasukkan teks dan warna latar belakang untuk melihat nisbah kontras WCAG dan tahap AA serta AAA yang lulus.