Cara menggunakannya
- Pilih linear, radial atau conic, kemudian tetapkan sudut atau kedudukan tengah.
- Tetapkan warna, kelegapan dan kedudukan setiap perhentian. Tambah sehingga enam perhentian atau alih keluar yang tidak diperlukan.
- Semak pratonton, kemudian salin baris CSS ke dalam helaian gaya anda.
Cara ia berfungsi
Output ialah pengisytiharan latar belakang CSS yang standard. Kecerunan linear berjalan mengikut sudut: 0deg dari bawah ke atas, 90deg dari kiri ke kanan, 180deg dari atas ke bawah. Kecerunan jejari merebak dari titik tengah sebagai bulatan atau elips yang memuatkan kotak. Kecerunan kon menyapu mengelilingi titik tengah, bermula pada sudut yang dipilih, yang berguna untuk kesan seperti pai dan roda warna.
Hentian ditulis mengikut urutan kedudukannya, jadi anda boleh menyeret kedudukan dengan bebas. Hentian dengan kelegapan dikurangkan ditulis sebagai rgba(), yang membolehkan latar belakang kelihatan melaluinya. Dua hentian pada kedudukan yang sama menghasilkan tepi tegas dan bukannya campuran, iaitu cara jalur dihasilkan.
Ketiga-tiga fungsi kecerunan berfungsi dalam setiap pelayar semasa. Kecerunan bercampur dalam ruang warna sRGB secara lalai, yang boleh kelihatan sedikit kelabu antara warna pelengkap (contohnya biru dan kuning); menambah hentian tengah dengan warna yang lebih cerah mengelakkannya.
Contoh
Latar belakang pengepala halus
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) memberikan kesan pudar lembut dari atas ke bawah yang memastikan teks gelap kekal mudah dibaca.
Jalur bertepi keras
Gunakan empat perhentian warna: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Dua perhentian pada 50% bertemu tanpa campuran, menghasilkan dua bahagian pejal.
Kesan lampu sorot
Gradien radial (bulatan di kiri atas) daripada rgba(255, 255, 255, 0.6) kepada rgba(255, 255, 255, 0) yang dilapisi di atas warna memberikan cahaya lembut di penjuru.
Soalan Lazim
0deg menghala ke arah mana?
Dalam CSS, 0deg menghala ke atas, jadi gradien bermula di bawah dan berakhir di atas. 90deg pergi dari kiri ke kanan. Ini berbeza daripada sesetengah aplikasi reka bentuk, yang mana 0° selalunya bermaksud kiri ke kanan.
Bolehkah saya menggunakan gradien pada teks?
Ya: terapkan latar belakang, kemudian tambah background-clip: text dan color: transparent. Pastikan teks kekal mudah dibaca pada halaman di setiap titik gradien.
Adakah saya memerlukan awalan vendor seperti -webkit-linear-gradient?
Tidak. Pelayar semasa menyokong sintaks tanpa awalan. Awalan hanya diperlukan untuk pelayar yang sudah sangat lama.
Privasi
Semuanya dijana dalam pelayar anda. Warna dan tetapan anda tidak dihantar atau disimpan.