Penjana Gradien CSS Dalam Talian Percuma
Cipta gradien linear dan radial CSS yang menakjubkan dengan penjana gradien kami yang mudah digunakan. Pilih warna, arahkan, dan salin kod CSS serta-merta untuk projek web anda.
Cara Mencipta Gradien CSS
- 1
Pilih Warna
Pilih warna pertama dan kedua anda menggunakan pemilih warna atau masukkan kod warna hex terus dalam input teks.
- 2
Pilih Jenis Gradien
Pilih antara gradien linear untuk transisi warna berarah atau gradien radial untuk transisi warna bulat dari tengah keluar.
- 3
Tetapkan Arah
Untuk gradien linear, pilih daripada 8 pilihan arah termasuk kanan, kiri, atas, bawah, dan arah pepenjuru menggunakan butang anak panah.
- 4
Salin Kod CSS
Klik butang 'Salin CSS' untuk menyalin properti latar belakang CSS lengkap ke papan keratan anda, sedia untuk ditampal ke dalam lembaran gaya anda.
Ciri Utama
Gradien Linear & Radial
Cipta kedua-dua gradien linear dan radial dengan kawalan penuh ke atas pemilihan warna dan arah gradien. Tukar antara jenis gradien serta-merta.
8 Kawalan Arah
Pilih daripada 8 arah berbeza untuk gradien linear termasuk orientasi mendatar, menegak, dan pepenjuru dengan kawalan anak panah yang intuitif.
Penjanaan Warna Rawak
Jana kombinasi warna rawak serta-merta untuk menemui idea gradien baharu dan skema warna kreatif untuk projek anda.
Salinan CSS Serta-merta
Salin kod gradien CSS yang dihasilkan ke papan keratan anda dengan satu klik. Properti latar belakang CSS yang sedia untuk digunakan bagi pelaksanaan segera.
Apakah Penjana Gradien CSS?
Penjana gradien CSS ialah alat yang mencipta gradien latar belakang CSS dengan menggabungkan dua atau lebih warna dalam transisi yang lancar. Penjana gradien kami menjana properti linear-gradient dan radial-gradient CSS yang boleh digunakan secara langsung dalam pembangunan web. Gradien linear mencipta transisi warna berarah, manakala gradien radial mencipta transisi bulat dari titik tengah. Alat ini menyediakan pratonton masa nyata dan menjana kod CSS yang serasi dengan pelayar untuk piawaian web moden.
Mengapa Menggunakan Penjana Gradien Kami?
- 1
Pratonton Visual Masa Nyata
Lihat perubahan gradien anda serta-merta dengan kawasan pratonton besar yang menunjukkan dengan tepat bagaimana gradien anda akan kelihatan dalam projek web anda.
- 2
Output CSS Sempurna
Kod CSS yang dihasilkan dioptimumkan dan sedia untuk digunakan dengan sintaks yang betul untuk properti latar belakang, serasi dengan semua pelayar moden.
- 3
Kawalan Arah Intuitif
Butang anak panah yang mudah digunakan untuk menetapkan arah gradien, menjadikannya mudah untuk mencipta orientasi yang anda perlukan untuk reka bentuk anda.
- 4
Inspirasi Kreatif
Penjana warna rawak membantu menemui kombinasi warna baharu dan menyediakan inspirasi kreatif untuk reka bentuk gradien dan skema warna anda.
Soalan Lazim
Apakah perbezaan antara gradien linear dan radial?
Gradien linear mencipta transisi warna dalam arah garis lurus (mendatar, menegak, atau pepenjuru), manakala gradien radial mencipta transisi warna bulat yang memancar keluar dari titik tengah.
Bolehkah saya menggunakan kod warna heks tersuai?
Ya, anda boleh memasukkan sebarang kod warna heks yang sah terus dalam input teks di sebelah pemilih warna. Alat ini menerima kod heks 6 digit seperti #ff6b6b atau #6bc1ff.
Bagaimana cara menggunakan kod CSS yang dihasilkan?
Salin kod CSS dan tampalkannya ke dalam lembaran gaya anda. Kod yang dihasilkan adalah properti latar belakang yang lengkap yang boleh anda gunakan pada mana-mana elemen HTML untuk memaparkan gradien.
Adakah gradien serasi dengan semua pelayar?
Ya, CSS yang dihasilkan menggunakan sintaks linear-gradient dan radial-gradient standard yang disokong oleh semua pelayar moden termasuk Chrome, Firefox, Safari, dan Edge.
Bolehkah saya mencipta gradien dengan lebih daripada dua warna?
Pada masa ini, alat kami menumpukan pada gradien dua warna untuk kesederhanaan dan reka bentuk yang bersih. Anda boleh mengubah suai kod CSS yang dihasilkan untuk menambah hentian warna tambahan jika diperlukan.