Penjana Kecerunan CSS
Apakah Kecerunan CSS?
Kecerunan CSS membolehkan anda memaparkan peralihan lancar antara dua warna atau lebih tanpa menggunakan fail imej. Ia hadir dalam tiga jenis: linear-gradient (sepanjang garis lurus), radial-gradient (memancar dari titik pusat), dan conic-gradient (berputar di sekeliling titik pusat). Kecerunan digunakan untuk latar belakang, butang, lapisan dan elemen hiasan.
Cara Menggunakan Penjana Kecerunan CSS
-
Pilih pratetap daripada contoh warna atau konfigurasikan kecerunan anda sendiri.
-
Pilih jenis kecerunan: linear, radial atau conic.
-
Laraskan sudut (untuk linear/conic) atau bentuk (untuk radial).
-
Edit titik henti warna — tukar warna dan kedudukan (0–100%).
-
Tambah atau buang titik henti warna mengikut keperluan.
-
Salin CSS dan tampalkan ke dalam helaian gaya anda.
Soalan yang Sering Diajukan
Bagaimana cara membuat gradien transparan? Gunakan nilai warna rgba() atau hsla() dengan saluran alfa 0 untuk transparansi penuh. Sebagai contoh, perhentian warna rgba(0,0,0,0) adalah hitam yang sepenuhnya transparan, berguna untuk overlay fade-out pada gambar.
Bagaimana cara membuat perhentian warna keras (tanpa transisi)? Tempatkan dua perhentian warna pada posisi yang sama — satu berakhir dan satu dimulai pada titik itu. Sebagai contoh, red 50%, blue 50% menciptakan peralihan instan dari merah ke biru di titik tengah tanpa transisi gradien.
Browser apa yang mendukung conic gradients? Conic gradients didukung di semua browser modern (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Mereka tidak didukung di Internet Explorer.
Bisakah saya menggunakan beberapa gradien pada elemen yang sama? Ya. Latar belakang CSS menerima daftar lapisan yang dipisahkan koma. Anda dapat menumpuk gradien, menggabungkannya dengan gambar latar belakang, dan mengontrol posisi dan ukuran setiap lapisan secara independen.
Keywords: penjana kecerunan CSS, kecerunan linear, kecerunan radial, kecerunan konik, penjana latar belakang CSS, pemilih warna kecerunan, alat kecerunan CSS