Penjana Gradien CSS
Reka gradien cantik dan dapatkan kod CSS sedia guna
Kawalan Gradien
Pratonton Langsung
Output CSS
Contoh Penggunaan
Gradien Hangat
Gradien hangat cantik yang bertukar dari oren matahari terbit ke merah jambu matahari terbenam.
Gradien Lautan
Gradien sejuk yang diilhamkan lautan dari biru gelap ke turkuois.
Cahaya Radial
Gradien radial yang mencipta kesan lampu sorot atau cahaya dari pusat.
Ciri-ciri
Pelbagai Jenis Gradien
Cipta gradien linear, radial dan konik dengan kawalan penuh atas arah dan kedudukan
Pratonton Visual Langsung
Lihat gradien dikemas kini secara masa nyata semasa melaraskan warna, hentian, sudut dan kedudukan
Pelbagai Hentian Warna
Tambah hentian warna tanpa had dengan kawalan kedudukan untuk gradien yang kompleks dan cantik
Privasi Diutamakan
Semuanya berjalan dalam pelayar anda — tiada data dihantar ke mana-mana pelayan
Cara Menggunakan?
Pilih Jenis dan Warna
Pilih jenis gradien (linear, radial, konik) dan tambah hentian warna dengan pemilih warna.
Laraskan Arah
Gunakan peluncur sudut untuk gradien linear atau kawalan kedudukan untuk jenis radial dan konik.
Salin CSS
Klik butang Salin CSS untuk menyalin kod gradien yang dijana ke papan keratan anda.
Soalan Lazim
Apakah penjana gradien CSS?
Penjana gradien CSS membolehkan anda mereka bentuk latar belakang gradien secara visual tanpa menghafal sintaks. Pilih jenis (linear, radial atau konik), tambah hentian warna, laraskan sudut atau kedudukan, dan alat ini menjana CSS bersih sedia untuk ditampal ke projek anda.
Ciri-ciri utama
Ketiga-tiga jenis gradien CSS dalam satu alat. Hentian warna tanpa had dengan seret dan letak. Peluncur sudut untuk linear dan kawalan kedudukan untuk radial dan konik. Pratetap cantik untuk mula dengan pantas. CSS yang dijana termasuk awalan -webkit untuk pelayar lama.
Kes penggunaan biasa
Latar belakang bahagian hero, keadaan hover butang, lapisan kad dan sempadan hiasan. Gradien radial sesuai untuk kesan lampu sorot, manakala konik sempurna untuk roda warna atau visual carta pai.
Petua
Gunakan 2-3 warna untuk reka bentuk bersih. Warna analog (jiran pada roda warna) memberikan peralihan lancar. Untuk latar belakang halus, cuba gradien antara dua ton yang hampir sama. Sentiasa semak gradien anda pada latar belakang cerah dan gelap.
Privasi
Berjalan sepenuhnya dalam pelayar anda. Tiada warna, tiada tetapan, tiada apa-apa yang dimuat naik ke mana-mana.