🛝Toolio
Tentang Kontak

🌈 Penghasil Gradien CSS

Buat gradien CSS linear atau radial yang indah dalam hitungan detik — pilih warna, sesuaikan sudut atau bentuk, tambahkan sebanyak titik warna yang Anda butuhkan, dan salin kode CSS yang selesai hanya dengan satu klik. Sepenuhnya gratis dan berjalan sepenuhnya di browser Anda.

Preset
°
Titik Warna
Pratinjau
CSS Output

Privat sejak awal. Alat ini berjalan sepenuhnya di browser Anda — tidak ada yang Anda masukkan diunggah atau disimpan, dan bisa dipakai offline.

Tentang

Alat ini memungkinkan Anda membuat gradien CSS secara visual tanpa menulis satu baris kode pun. Pilih antara linear-gradient dan radial-gradient, atur sudut atau bentuk, kelola titik warna dengan pemilih warna dan penggeser posisi, dan lihat hasilnya secara langsung dalam waktu nyata. Delapan preset bawaan (Sunset, Ocean, Aurora, Neon, dan lainnya) memberi Anda titik awal. Karena semua operasi berjalan secara lokal di browser Anda menggunakan JavaScript murni, tidak ada data warna atau informasi desain yang pernah meninggalkan perangkat Anda — tidak ada server atau akun.

Cara pakai

  1. Pilih jenis gradien — Linear atau Radial — dari dropdown Jenis Gradien.
  2. Untuk gradien linear, atur sudut (0–360°) menggunakan slider atau input angka. Untuk gradien radial, pilih Ellipse atau Circle sebagai bentuknya.
  3. Klik swatch warna di panel Titik Warna untuk membuka pemilih warna, lalu drag input posisi untuk menempatkan setiap titik tepat di tempat yang Anda inginkan.
  4. Klik + Tambahkan Titik untuk menyisipkan titik warna baru yang secara otomatis ditempatkan di celah terbesar, atau klik tombol ✕ untuk menghapus titik apa pun (minimal 2 titik diperlukan).
  5. Klik Salin CSS untuk menyalin deklarasi latar belakang: linear-gradient(…) atau radial-gradient(…) ke clipboard Anda dan tempel langsung ke stylesheet Anda.

FAQ

Apakah Penghasil Gradien CSS gratis untuk digunakan?
Ya, sepenuhnya gratis — tanpa langganan, tanpa akun, dan tanpa batas penggunaan tersembunyi. Buka halaman dan mulailah membuat gradien segera.
Apakah alat ini berfungsi offline tanpa koneksi internet?
Ya. Setelah halaman dimuat, alat ini berfungsi offline tanpa panggilan API eksternal, ketergantungan CDN, atau permintaan server. Aman digunakan di pesawat atau lingkungan jaringan terbatas.
Apakah data warna atau desain saya dikirim ke server?
Tidak. Semua pembuatan gradien dan rendering pratinjau dilakukan secara lokal di browser Anda menggunakan JavaScript. Pilihan warna Anda hanya disimpan di localStorage browser Anda dan tidak pernah dikirim ke mana pun.
Apa perbedaan antara linear-gradient dan radial-gradient?
Sebuah linear-gradient bertransisi warna sepanjang garis lurus pada sudut tertentu (misalnya 135deg). Sebuah radial-gradient memancarkan warna keluar dari titik pusat dalam bentuk elips atau lingkaran. Keduanya menghasilkan CSS standar yang berfungsi di semua browser modern.
Berapa banyak titik warna yang bisa saya tambahkan?
Tidak ada batas bawaan — Anda dapat menambahkan sebanyak titik warna yang Anda butuhkan (minimal 2). Titik baru secara otomatis ditempatkan di celah terbesar dalam gradien dan warna interpolasi di posisi tersebut sudah diisi sebelumnya untuk titik awal yang mulus.
Apakah alat ini mengunggah data saya?
Tidak. Semuanya berjalan langsung di browser Anda, jadi data Anda tidak pernah meninggalkan perangkat — bahkan tetap bisa dipakai offline setelah halaman dimuat.