Generator Gradasi Warna (Gradient CSS)

1. 01Pilih preset atau mulai dari awalPilih salah satu preset warna, atau atur titik warna sendiri dari awal.
2. 02Atur tipe dan sudutPilih linear (dengan sudut derajat) atau radial (memancar dari tengah).
3. 03Sesuaikan titik warnaTambah, hapus, atau geser posisi tiap titik warna (sampai 5 titik).
4. 04Salin kode CSSKode CSS gradient siap pakai muncul otomatis — salin dan tempel ke stylesheet Anda.

• Gradient linear 2 warnaBiru ke ungu dengan sudut 135° — cocok untuk background hero section.
• Gradient radialWarna terang di tengah memancar ke warna gelap di tepi — efek sorotan (spotlight).

• Gunakan 2-3 titik warna untuk hasil bersihTerlalu banyak titik warna bisa membuat gradasi terlihat berantakan; 2-3 warna biasanya paling elegan.
• Gradasi bukan pengganti kontras teksKalau teks akan diletakkan di atas gradient, cek kontrasnya dengan alat khusus — generator ini tidak memeriksa keterbacaan teks.

Linear gradient mengalir dalam satu garis lurus pada sudut yang Anda tentukan (0° dari bawah ke atas, 90° dari kiri ke kanan, dan seterusnya). Radial gradient memancar keluar dari sebuah titik pusat, cocok untuk efek sorotan atau tombol bulat.

Salin kode yang dihasilkan dan tempelkan sebagai nilai properti background atau background-image di CSS Anda — didukung semua browser modern tanpa perlu prefix tambahan.

Setiap titik warna punya posisi (dalam persen) yang menentukan di mana warna itu "mekar" dalam gradasi. Menggeser posisi titik tengah membuat satu warna mendominasi area yang lebih luas, sementara posisi yang rapat berdekatan menghasilkan transisi warna yang lebih tajam.

Linear cocok untuk background section, tombol, dan elemen persegi panjang karena arahnya bisa disesuaikan dengan layout. Radial lebih pas untuk elemen bulat (avatar, badge) atau efek sorotan yang menarik perhatian ke titik tengah, seperti pada kartu promo atau hero image.

Semua warna dan pengaturan gradient dibuat di browser Anda; tidak ada yang diunggah atau disimpan di server.

Bagaimana cara membuat gradient CSS?

Pilih tipe (linear/radial), atur titik warna dan sudutnya, lalu salin kode CSS yang otomatis muncul.

Berapa banyak warna yang bisa dipakai?

Sampai 5 titik warna sekaligus.

Apakah kode CSS-nya kompatibel semua browser?

Ya, sintaks gradient CSS modern didukung semua browser utama tanpa vendor prefix.

Apakah ada preset siap pakai?

Ada beberapa preset warna populer untuk memulai cepat, dan bisa disesuaikan sepenuhnya.

Apakah alat ini gratis?

Ya, gratis sepenuhnya, tanpa daftar dan tanpa batas pemakaian.

Bagaimana cara mengatur sudut gradient linear?

Geser slider sudut (dalam derajat) — 0° mengalir dari bawah ke atas, 90° dari kiri ke kanan, dan seterusnya, kode CSS-nya ikut terbarui otomatis.