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%. Pratinjau diperbarui secara instan; salin deklarasi latar belakang atau gambar latar belakang secara lengkap ke dalam stylesheet Anda. Mendukung input warna HEX dengan validasi.
Sudut (°)
Warna 1
Warna 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 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.
Kapan harus memilih sesuatu yang lain
• Bila Anda memerlukan lebih dari dua perhentian warna — perpanjang CSS yang disalin secara manual atau gunakan aplikasi desain.
• Bila Anda menginginkan gradien berbentuk kerucut (sapu) — tidak didukung di sini.
• Bila Anda memerlukan varian mode gelap otomatis — duplikat dan sesuaikan warna secara terpisah.
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.
Sudut gradien linier
CSS mengukur sudut searah jarum jam dari "atas" (0 derajat). Berbeda dengan kelas matematika yang sudutnya sering dimulai dari kanan. Jika gradien terlihat salah diputar, tambahkan atau kurangi 90 derajat. Gunakan pengeditan langsung devtools bersama generator ini untuk menyempurnakannya.
Kinerja dan fallback
Gradien ramah GPU di peramban modern. Untuk klien yang sangat lama, tetapkan penggantian warna latar belakang yang solid ke warna berhenti yang lebih terang sebelum garis gradien.
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.
Apakah warna dikirim ke server?
Tidak. Pratinjau render secara lokal.
Apakah ini gratis?
Ya, tidak perlu akun.