Generator gradien CSS dengan pratinjau langsung

Cara memakai

Pilih Jenis gradien: garis yang warnanya berubah (linear), sebaran dari pusat (radial) atau putaran mengelilingi satu titik (konik).
Atur Sudut untuk gradien linear atau konik. Sudut tidak berlaku untuk gradien radial.
Pilih setiap warna di Titik warna dan beri posisinya dalam persen. Tambahkan atau hapus titik, dari dua sampai enam.
Tekan Salin di bawah CSS dan tempel barisnya ke lembar gaya Anda, atau mulai dari salah satu preset.

Tiga jenis gradien

Linear: warna berubah sepanjang garis lurus. Sudut 0deg menunjuk ke atas dan sudut berputar searah jarum jam, sehingga 90deg berjalan dari kiri ke kanan dan 180deg dari atas ke bawah.
Radial: warna menyebar dari pusat dalam bentuk lingkaran, dari titik pertama sampai titik terakhir.
Konik: warna berputar mengelilingi pusat, seperti jarum jam. Sudut menentukan tempat warna pertama dimulai.

Titik warna dan posisinya

Titik warna adalah sebuah warna pada posisi dari 0% sampai 100% sepanjang gradien. Editor menulis titik-titik itu menurut urutan posisi, sehingga urutan saat Anda memasukkannya tidak mengubah gambarnya. Dua sampai enam titik menjaga gradien tetap mudah dibaca dan CSS-nya tetap pendek.

Kodenya adalah sintaks CSS standar yang dibaca peramban masa kini, dan pratinjau digambar peramban Anda dari nilai yang sama, jadi yang Anda lihat adalah yang diterima lembar gaya.

Contoh: preset Terbit

Preset Terbit adalah gradien linear pada 135deg, yang berjalan dari kiri atas ke arah kanan bawah. Ia memiliki tiga titik: oranye pada 0%, kuning pada 50% dan merah muda pada 100%.

CSS yang dihasilkannya adalah: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

Pertanyaan yang sering diajukan

Apa arti 0deg pada gradien linear?

0deg menunjuk ke atas, sehingga dengan sudut itu warna berubah dari bawah ke atas. Sudut berputar searah jarum jam: 90deg berjalan dari kiri ke kanan dan 180deg dari atas ke bawah.

Mengapa titik warna saya berurutan berbeda di kode?

Kode menulis titik-titik menurut posisi, karena CSS membacanya dalam urutan itu. Jika Anda memasukkan 80% sebelum 20%, kode menampilkan 20% lebih dulu, dan gambarnya tetap sama.

Bisakah saya memakai warna transparan?

Editor ini menerima warna padat yang ditulis sebagai heksadesimal. Untuk transparansi, sunting kode secara manual dan pakai warna dengan nilai alfa.

Berapa banyak titik warna yang bisa saya pakai?

Dua sampai enam. Editor menjaga jumlahnya dalam rentang itu, sehingga gradien selalu memiliki awal dan akhir.

Apakah kodenya berfungsi di setiap peramban?

Sintaksnya adalah bentuk standar yang didukung peramban masa kini. Periksa hasilnya di peramban yang dipakai pengunjung Anda, terutama jika Anda mendukung versi lama.

Apakah desain saya dikirim ke suatu tempat?

Tidak. Gradien dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami.

Bisakah saya memakai gradien untuk warna teks?

Alat ini hanya menulis deklarasi latar belakang. Meletakkan gradien di belakang teks memungkinkan, tetapi memerlukan CSS lebih banyak daripada yang ditulis alat ini.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.