Apa itu Generator Gradien?

Pembangun gradien CSS visual yang memungkinkan Anda membuat gradien linear, radial, dan conic dengan titik warna tak terbatas. Sesuaikan sudut, posisi, dan warna secara real time lalu salin CSS dengan satu klik.

Pilih antara gradien linear, radial, dan konik, atur sudut dari 0° hingga 360°, dan tambahkan sebanyak mungkin titik warna dengan opasitas per titik untuk lapisan transparan. Mulai dari preset pilihan seperti Senja, Instagram, atau Samudra, lalu sempurnakan warnanya. Untuk gradien radial, pilih bentuk lingkaran atau elips dan kata kunci jangkauan, dan ganti pencampuran ke OKLab atau OKLCH untuk interpolasi modern yang lebih halus, atau terapkan kurva easing. Aktifkan Animasikan untuk mendapatkan loop @keyframes siap tempel demi latar yang bergerak. Hasilnya adalah CSS murni yang langsung Anda tempel ke lembar gaya, konfigurasi Tailwind, atau alat desain.

Cara menggunakan

1. Langkah 1 — Pilih jenis gradien (linear, radial, atau conic) dan tentukan arah atau sudut menggunakan slider sudut atau tombol prasetel.
2. Langkah 2 — Tambahkan titik warna dengan mengklik bilah gradien. Sesuaikan warna dan posisi setiap titik dengan cara menyeret atau memasukkan nilai tepat.
3. Langkah 3 — Pratinjau gradien secara langsung, lalu salin kode CSS yang dihasilkan ke clipboard atau unduh sebagai file CSS.

Kapan menggunakan

• Mendesain hero section, tombol, dan latar kartu tanpa membuka Photoshop.
• Menjaga palet merek tetap konsisten di situs, email, dan slide presentasi.
• Menguji efek CSS sebelum menyerahkan spesifikasi ke developer.

Hasil

Misalnya Anda ingin latar belakang hero bertema matahari terbenam. Pilih gradien linear 135°, taruh oranye di 0%, rose di 50%, dan ungu di 100%, lalu salin CSS ke stylesheet Anda.

FAQ

Apa beda gradien linear, radial, dan conic?

Linear menyebar warna di sepanjang garis lurus sesuai sudut yang Anda pilih. Radial memancar dari titik tengah ke luar, mirip pancaran matahari. Conic memutarnya mengelilingi sebuah titik pusat, cocok untuk diagram pai atau roda warna.

Berapa banyak color stop yang bisa ditambahkan?

Tidak ada batas keras. Sebagian besar desain memakai dua sampai empat color stop. Lewat lima atau enam, gradien jadi terlihat kotor karena warna saling melebur dan transisi tajam yang Anda inginkan hilang.

Kenapa gradien saya terlihat berpita di latar gelap?

Banding muncul saat warna yang berdekatan memiliki kecerahan yang sangat mirip. Tambahkan kontras antar titik warna, ganti pencampuran warna ke OKLCH atau OKLab (perseptual), atau lapisi noise halus melalui CSS.

Bisakah gradien ini dipakai di Figma atau Sketch?

Kode CSS-nya sendiri tidak bisa langsung ditempel, tetapi nilai warna dan posisinya cocok satu lawan satu. Salin hex dan persentase tiap stop ke editor gradien di alat desain Anda.

Parameter sudut sebenarnya mengatur apa?

Di gradien linear, 0° menunjuk ke atas dan sudut berputar searah jarum jam: 90° dari kiri ke kanan, 180° dari atas ke bawah. Di conic, sudut menentukan dari titik mana pada lingkaran perputaran warna dimulai.

Alat terkait