CodeKitHubApakah alat ini?
Gradient CSS ialah imej yang dijana oleh pelayar daripada senarai warna, bukannya fail yang anda muat naik — linear-gradient() menukar warna sepanjang garis lurus pada sudut tertentu, manakala radial-gradient() menukar warna ke luar daripada titik tengah. Kedua-duanya menerima dua atau lebih color stop, setiap satu boleh dipasangkan pada kedudukan sepanjang gradient itu.
Ditulis secara manual, gradient mudah tersilap secara halus: susunan stop tidak betul, peratus tertinggal, atau nilai sudut yang salah arah (sudut CSS berjalan ikut jam dari 'to top', tidak seperti sudut matematik). Alat ini menjauhkan sintaks daripada jalan anda — tetapkan warna dan kedudukan dengan pemilih dan slider, lihat kotak pratonton dikemas kini secara masa nyata, dan salin CSS yang terhasil apabila ia kelihatan betul.
Sumber: CSS Images Module Level 3, W3C — spesifikasi yang mentakrifkan sintaks linear-gradient() dan radial-gradient().
Kenapa guna alat ini?
- Pratonton langsung dikemas kini serta-merta pada setiap perubahan warna, kedudukan, dan sudut — tiada keperluan muat semula halaman untuk lihat hasilnya.
- Tukar antara gradient linear dan radial dengan satu klik; kawalan sudut secara automatik tersembunyi untuk gradient radial, di mana ia tidak terpakai.
- Tambah atau buang color stop (2 hingga 4) dan bukannya terhad kepada gradient dua warna tetap.
- Setiap stop mempunyai slider kedudukan sendiri, jadi stop tidak perlu diagihkan sama rata.
- Menghasilkan CSS siap tampal menggunakan sintaks standard linear-gradient()/radial-gradient().
- Berjalan sepenuhnya dalam pelayar anda — apa yang anda laraskan tidak dimuat naik ke mana-mana. Percuma, tiada pendaftaran, berfungsi di telefon.
Cara menggunakannya
- Pilih Linear atau Radial sebagai jenis gradient.
- Untuk gradient linear, seret slider sudut — 90deg pergi dari kiri ke kanan, 180deg pergi dari atas ke bawah, dan seterusnya.
- Tetapkan warna dan kedudukan untuk setiap stop; stop pertama ialah warna permulaan gradient, stop terakhir ialah warna penghujungnya.
- Klik '+ Add stop' untuk tambah sehingga 4 stop keseluruhan bagi gradient pelbagai warna, atau butang ✕ untuk buang satu (minimum 2).
- Salin CSS yang dijana dan tampal ke dalam deklarasi background atau background-image.
Contoh
Input
Linear · Sudut: 90deg · Stop: #f97316 pada 0%, #ec4899 pada 100%Hasil
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Gradient jingga-ke-merah jambu dari kiri ke kanan — gaya biasa untuk butang, banner dan background hero.
Gradient linear berbanding radial
Gradient linear menukar warna sepanjang garis lurus, dikawal oleh sudut — berguna untuk banner, butang, dan background berarah. Gradient radial pula menukar warna ke luar daripada titik tengah dalam bulatan yang berkembang, yang sesuai untuk kesan sorotan lampu, lencana, atau background bergaya cahaya samar. Alat ini menetapkan gradient radial sebagai bentuk bulatan yang berpusat di tengah kotak secara lalai, yang meliputi kes penggunaan radial paling biasa; CSS turut menyokong bentuk elips dan kedudukan tidak di tengah jika anda perlu edit hasil itu secara manual selanjutnya.
Corak gradient biasa
- Aksen jenama halus: dua warna hampir serupa (contohnya dua tona warna yang sama) pada sudut cetek untuk lapisan latar belakang lembut.
- Butang CTA kontras tinggi: dua warna tepu yang saling melengkapi pada 90deg atau 135deg untuk rupa berani dan boleh diklik.
- Overlay atas gambar: gradient daripada lutsinar kepada warna pejal (tetapkan kelutan melalui warna rgba pada hex asal pemilih, atau laraskan selepas salin) dilapis atas background-image.
- Gradient pelangi/jenama pelbagai stop: 3–4 stop diagihkan merentasi julat penuh 0–100% untuk peralihan yang lebih licin dan beransur berbanding gradient dua warna.
- Sorotan radial: satu stop terang berhampiran 0% beransur kepada stop lebih gelap berhampiran 100%, berguna untuk seksyen hero atau sorotan kad.
Menggabungkan dengan alat CSS lain
Gradient sering digabungkan dengan bucu bulat dan bayang pada elemen yang sama — kad gradient dengan box-shadow lembut dan bucu bulat ialah corak UI biasa. Jana setiap bahagian secara berasingan dan gabungkan deklarasi CSS pada elemen tersebut.
→ Penjana CSS Box-Shadow · Penjana CSS Border-Radius · Pemilih Warna
Soalan lazim
Apa beza antara linear-gradient() dan radial-gradient()?
linear-gradient() menukar warna sepanjang garis lurus pada sudut yang dinyatakan. radial-gradient() menukar warna ke luar daripada titik tengah dalam bentuk yang berkembang (bulatan atau elips). Kedua-duanya menerima jenis senarai color-stop dipisah koma yang sama; hanya bentuk peralihan yang berbeza.
Bagaimana sudut gradient CSS berfungsi?
Sudut gradient CSS berjalan ikut jam bermula dari 'to top' (0deg menghala ke atas). 90deg menghala ke kanan, 180deg menghala ke bawah, dan 270deg menghala ke kiri — konvensyen bertentangan daripada sudut matematik standard, yang sering mengelirukan apabila menulis gradient secara manual.
Bolehkah saya guna lebih daripada 4 color stop?
Ya — gradient CSS menerima sebarang bilangan color stop dipisah koma. Alat ini mengehadkan pembina interaktif kepada 4 untuk UI yang boleh diurus, tetapi anda boleh salin CSS yang dijana dan tambah lagi entri 'warna kedudukan%' dipisah koma secara manual dalam stylesheet anda.
Kenapa gradient saya kelihatan berjalur bukannya licin?
Jaluran biasanya berpunca daripada warna yang terlalu jauh dari segi ton dengan terlalu sedikit stop di antaranya, atau daripada ketepatan warna pelayar sendiri yang terhad pada kontras sangat rendah. Menambah stop perantaraan dengan warna bercampur, atau memilih warna yang lebih rapat dari segi ton, umumnya menghasilkan hasil yang lebih licin.
Bolehkah saya animasikan gradient CSS?
Tidak secara langsung — gradient tidak boleh dianimasikan secara semula jadi seperti background-position atau transform, kerana pelayar tidak dapat menginterpolasi antara dua takrifan gradient yang sembarangan. Cara alternatif biasa termasuk menganimasikan background-position pada gradient yang bersaiz lebih besar, atau melakukan transisi background-color jika hanya satu warna yang berubah.