Generator Gradien CSS
Buat gradien CSS linear atau radial secara visual dan salin CSS yang siap pakai, langsung di browser Anda.
🔒 Diproses secara lokal di browser Anda
Loading…
Cara menggunakan
- Pilih Linear atau Radial sebagai jenis gradien. Untuk gradien linear, geser penggeser atau ketik nilai untuk menentukan sudut dalam derajat.
- Setiap titik warna memiliki swatch warna dan posisi (0-100%). Klik swatch untuk memilih warna, atau ketik posisi untuk memindahkan titik tersebut di sepanjang gradien.
- Gunakan "Tambah titik" untuk menambahkan hingga 5 titik warna, atau "Hapus" di sebelah suatu titik untuk menghapusnya (minimal 2 titik diperlukan).
- Kotak pratinjau di atas hasil CSS akan diperbarui secara langsung setiap kali Anda menyesuaikan kontrol apa pun — tanpa perlu menekan tombol apa pun.
- Klik Salin untuk menyalin deklarasi CSS yang dihasilkan, siap ditempel ke stylesheet Anda.
Fitur
- Mendukung gradien linear (dengan sudut yang dapat disesuaikan) maupun radial
- Hingga 5 titik warna, masing-masing dengan warna dan posisinya sendiri
- Kotak pratinjau langsung yang diperbarui secara instan saat kontrol apa pun diedit
- Salin sekali klik untuk deklarasi CSS yang siap ditempel
- 100% berjalan di sisi klien — gradien Anda tidak pernah meninggalkan browser
Pertanyaan yang sering diajukan
Apakah alat ini mengirim gradien saya ke suatu tempat?
Tidak. Gradien dibuat dan dipratinjau sepenuhnya dengan JavaScript dan CSS lokal — tidak pernah diunggah atau dikirim ke server mana pun.
Berapa banyak titik warna yang bisa saya tambahkan?
Hingga 5 titik. Diperlukan minimal 2 titik agar gradien masuk akal, sehingga tombol Hapus akan dinonaktifkan setelah tersisa 2 titik.
Apakah pengaturan sudut berpengaruh pada gradien radial?
Tidak. Gradien radial pada alat ini selalu memancar ke luar dari pusat berbentuk lingkaran, sehingga pengaturan sudut hanya berlaku untuk gradien linear.
Bagaimana jika dua titik memiliki posisi yang sama?
Hal ini diperbolehkan dan bisa digunakan secara sengaja untuk membuat batas warna yang tegas alih-alih transisi halus — kedua titik tetap dipertahankan dalam CSS yang dihasilkan.
Bisakah saya menempelkan hasilnya langsung ke file CSS saya?
Ya. Kotak hasil menampilkan deklarasi `background: ...;` lengkap yang bisa Anda tempel apa adanya ke stylesheet atau inline style.