Generator gradien CSS
Rancang gradien latar belakang CSS tanpa menghafal sintaksis. Beralih antara tipe linier dan radial, atur sudut untuk gradien linier (derajat), dan pilih dua perhentian warna pada 0% dan 100%.
Cara membuat gradien
1. Pilih gradien linier atau radial.
2. Untuk linier, atur sudut dalam derajat (0 = bawah ke atas, 90 = kiri ke kanan).
3. Masukkan warna awal dan akhir (HEX).
4. Salin CSS dari hasilnya masukkan kartu ke dalam proyek Anda.
Contoh gradien
Spanduk pahlawan linier (135 derajat)
Teal #6F9B96 hingga peach #E8C4B8 pada 135° — diagonal yang umum pada header laman landas. Gunakan sebagai latar belakang pada bagian lebar penuh.
Sorotan radial
Jenis radial dengan pusat terang dan tepi gelap — mensimulasikan sketsa: gradien-radial(lingkaran, #fff 0%, #333 100%).
Pudar vertikal (180 derajat)
Sudut 180 untuk memudar dari atas ke bawah dari warna merek menjadi putih — berguna di balik bilah navigasi.
Kapan menggunakan alat ini
• Saat Anda membuat prototipe latar belakang UI dan menginginkan masukan visual instan.
• Saat Anda lupa apakah sudut 90 derajat berjalan dari kiri-kanan atau atas-bawah.
• Saat Anda perlu salin-tempel CSS untuk CodePen, nilai arbitrer Tailwind, atau handoff desain.
Warna berhenti secara detail
Perhentian adalah warna ditambah posisi opsional: #ff0000 0%, #0000ff 50%, #00ff00 100%. Browser menginterpolasi RGB di antara perhentian. Perhentian di tengah menciptakan matahari terbenam yang bergaris atau garis multi-merek. Mulailah dengan dua perhentian di sini, lalu tempel dan tambahkan perhentian ketiga di devtools hingga terlihat benar.
Pertanyaan yang sering diajukan
Apa itu sintaks CSS untuk gradien linier?
background: linear-gradient(angle, color1 0%, color2 100%); Sudut dalam derajat; warna adalah penghentian di sepanjang garis.
Bagaimana cara kerja penghentian warna?
Tanda berhenti di mana setiap warna berada pada garis gradien. 0% adalah awal, 100% adalah akhir. Alat ini memperbaiki dua perhentian; tambahkan lebih banyak di editor Anda jika diperlukan.
Linear vs. radial?
Linear menyatu sepanjang garis lurus. Radial menyatu keluar dari titik pusat — cocok untuk lingkaran dan titik lunak.
Nilai sudut mana yang umum?
0 derajat ke atas, 90 derajat ke kanan, 180 derajat ke bawah, 135 derajat diagonal — umum untuk kartu dan pahlawan.
Apakah ini mengatur latar belakang atau gambar latar belakang?
Penggunaan keluaran singkatan latar belakang yang cocok untuk sebagian besar div; Anda dapat membaginya menjadi gambar latar jika mengganti lapisan lainnya.