Menulis sintaks gradien secara manual agak menyusahkan: sudut, susunan stop dan kedudukan peratusan saling berkait, dan satu kesilapan menaip boleh merosakkan keseluruhan background tanpa sebarang amaran. Penjana ini memastikan pratonton dan kod sentiasa sepadan - apa yang anda lihat adalah CSS yang anda salin, sama betul-betul. Ia berjalan sepenuhnya di sisi klien, jadi tiada apa yang anda reka bentuk dimuat naik ke mana-mana.
Penjana Gradien CSS Percuma
Berjalan sepenuhnya dalam pelayar anda - tanpa muat naik, tanpa pendaftaran.
Jenis
Color stop
Kod CSS
Apakah penjana gradien CSS?
Penjana gradien CSS ialah alat visual yang membina kod linear-gradient(), radial-gradient() atau conic-gradient() untuk anda. Pilih warna, seret kedudukan stop, tetapkan sudut, dan salin CSS yang sedia untuk ditampal sambil pratonton langsung menunjukkan tepat apa yang akan dipaparkan pelayar. Semuanya berjalan dalam pelayar anda.
Cara guna
- 1Pilih jenis gradien. Pilih linear, radial atau conic. Linear memaparkan penggelangsar sudut; radial menambah bentuk (circle atau ellipse) dan kedudukan; conic mempunyai sudut permulaan dan kedudukan.
- 2Tetapkan color stop anda. Klik setiap swatch untuk memilih warna dan seret penggelangsarnya untuk menggerakkan stop di sepanjang gradien. Tambah sehingga 8 stop, atau buang sehingga tinggal 2.
- 3Laraskan arah. Seret penggelangsar sudut (0-360 darjah) atau pilih kata kunci kedudukan. Pratonton dikemas kini secara langsung setiap kali anda membuat perubahan.
- 4Salin CSS. Tekan Salin untuk mendapatkan pengisytiharan background, termasuk baris warna pejal sebagai ganti, dan tampal ke dalam helaian gaya anda.
Untuk siapa
- Pembangun front-end yang memerlukan latar belakang hero, kad atau butang dan mahu baris
linear-gradient()yang tepat tanpa perlu menghafal sintaksnya. - Pereka web dan UI yang mencipta semula gradien daripada mockup: bina semula secara visual, kemudian serahkan CSS yang dijana terus kepada pasukan pembangun.
- Pembina e-mel dan halaman pendaratan yang memerlukan baris warna pejal sebagai ganti supaya reka bentuk tetap kemas dalam klien lama - hasilnya sudah termasuk itu secara automatik.
- Pelajar yang belajar CSS dan ingin melihat bagaimana sudut, color stop dan jenis gradien mengubah hasil paparan secara masa nyata.
Soalan lazim
Adakah penjana gradien CSS ini percuma?
Ya - 100% percuma, tiada pendaftaran, tiada tera air, tiada had. Bina gradien sebanyak mana yang anda mahu dan salin CSS terus ke dalam projek anda.
Adakah sebarang data dimuat naik ke pelayan?
Tidak. Gradien dibina dan dipratonton sepenuhnya dalam pelayar anda menggunakan JavaScript biasa. Tiada warna, kod atau data penggunaan dihantar ke mana-mana.
Apakah perbezaan antara gradien linear, radial dan conic?
Gradien linear mencampurkan warna di sepanjang garis lurus pada sudut pilihan anda. Gradien radial memancar keluar daripada titik pusat dalam bentuk bulatan atau elips. Gradien conic pula mengelilingi titik pusat, seperti roda warna atau carta pai.
Bagaimana color stop berfungsi dalam gradien CSS?
Setiap stop memasangkan satu warna dengan kedudukan dari 0% hingga 100% di sepanjang garis gradien. Pelayar mencampurkan warna secara lancar antara stop yang bersebelahan. Meletakkan dua stop pada kedudukan yang sama menghasilkan tepi tajam dan bukannya campuran - berguna untuk kesan jalur atau carta pai.
Pelayar mana yang menyokong gradien ini?
Semua pelayar moden - Chrome, Firefox, Safari dan Edge - menyokong linear-gradient() dan radial-gradient() tanpa awalan; conic-gradient() pula telah disokong di mana-mana sejak 2020. Kod yang disalin juga menyertakan warna pejal sebagai ganti untuk pelayar yang lebih lama.
Bolehkah saya guna gradien yang dijana sebagai warna teks?
Tidak secara terus - gradien adalah imej, bukan warna. Gunakan gradien sebagai background-image pada elemen teks, kemudian tambah background-clip: text dan color: transparent supaya gradien kelihatan menerusi setiap huruf.
Kenapa gradien saya menunjukkan kesan berjalur (banding)?
Banding berlaku apabila dua stop yang jauh mencampurkan warna sepanjang jarak yang panjang dengan rona serupa, mendedahkan langkah warna 8-bit. Kurangkan dengan menambah color stop di tengah, memendekkan jarak campuran, atau memilih warna yang berbeza dari segi kecerahan, bukan sekadar rona.