Gradient Generator
Gradient Generator — berjalan dalam pelayar. Input tidak disimpan.
Penjana kecerunan
Masukkan nilai, kemudian tekan Kira.
Pratonton
Menjana CSS linear-gradient secara masa nyata. Sekurang-kurangnya dua warna diperlukan.
Cara guna
- Pilih jenis (linear atau radial), arah, dan minimal dua warna.
- Gunakan Tambah warna / Hapus warna untuk mengubah jumlah stop. Wajib dua warna atau lebih.
- Periksa pratonton langsung, lalu salin CSS
backgrounddengan Salin. - Reset mengembalikan gradien linear dua warna lalai.
Konsep utama
Gradien CSS adalah gambar latar, bukan background-color solid. Gradien linear mengikuti sudut atau kata kunci seperti to right; radial menyebar dari pusat. Setiap stop tambahan menambah warna di sepanjang jalur itu. Generator mengeluarkan satu deklarasi background yang boleh ditampal ke stylesheet. Tidak menghasilkan peraturan hover, animasi, atau awalan vendor.
Stop keras (dua warna di peratus yang sama) nampak seperti garis. Campuran lembut menggunakan peratus berbeda. Hex dan RGB dari pemilih sama-sama berfungsi. Pembuatan hanya di pelayar. Untuk transparansi, ubah CSS yang disalin menjadi rgba/hsla—pemilih biasanya hex legap.
Contoh
Gradien linear dari #4f46e5 ke #06b6d4 ke kanan bawah adalah latar hero yang umum. Tambah stop tengah di 50% untuk campuran tiga warna. Salin nilai setelah background: dan guna apa adanya. Bagian hero sering kelihatan bagus sekitar 135deg di atas overlay foto. Untuk butang, 180deg (sedikit lebih terang di atas) pola yang umum. Saat mencoba input yang sama, reset dulu agar keluaran lama tidak tercampur. Di komputer berkongsi, kosongkan medan setelah selesai. Menutup tab membuang yang ditampal; anda tidak perlu menghantar permintaan hapus ke pelayan. Nama butang sama dengan alat di atas halaman. Jika hasil kosong, periksa medan wajib dan error yang tersembunyi.
Berkaitan: Penjana box shadow · Pemilih warna
Soalan lazim
Bolehkah saya membuat gradien berulang atau kerucut?
Versi ini mengeluarkan CSS linear dan radial. Sintaks repeating dan conic tidak disertakan.
Berapa banyak warna yang boleh ditambah?
Gunakan Tambah warna untuk menambah stop. Minimal dua warna wajib.
Apakah Salin menyertakan nama properti?
Menyalin deklarasi lengkap <code>background: ...;</code>. Jika hanya butuh fungsinya, hapus nama properti setelah menampal.
Apakah awalan vendor ditambahkan?
Tidak. Pelayar modern memahami <code>linear-gradient</code> / <code>radial-gradient</code> standar.
Apakah CSS disimpan pada pelayan?
Tidak. Hanya dibuat di pelayar.
Bolehkah menggunakan warna transparan?
Hex dari pemilih biasanya legap. Untuk alfa, tampal rgba/hsla ke stylesheet setelah menyalin.
Disemak terakhir: 2026-09-04