css-tools.com logo CSS Tools
ID

Generator Gradien CSS

Buat gradien linear, radial, dan konik secara visual, lalu salin CSS yang bersih. Tumpuk beberapa layer, tambahkan titik warna dengan transparansi, dan seret langsung di pratinjau untuk mengubah arah.

Gradien CSS dari hijau ke merah tua

Setiap gradien bisa memiliki beberapa layer, dan setiap layer punya jenis, sudut, dan warnanya sendiri. Hasilnya CSS murni tanpa prefiks vendor, siap ditempel ke proyek Anda. Tautan halaman menyimpan gradien Anda, jadi Anda bisa membagikannya atau membukanya lagi nanti.

Cara Menggunakan Generator Gradien

Pilih Jenis Gradien
Pilih linear, radial, atau konik untuk setiap layer. Linear memadukan warna di sepanjang garis lurus, radial menyebarkannya dari titik pusat, dan konik memutarnya di sekitar pusat.

Atur Warna dan Layer
Klik bilah warna untuk menambahkan titik warna, seret untuk mengubah posisinya, dan pilih warna apa pun dengan transparansi. Tombol tambah layer menaruh gradien lain di atasnya.

Pratinjau Desain Anda
Cek gradien pada enam bentuk: layar penuh, persegi, persegi panjang horizontal dan vertikal, lingkaran, dan bintang. Anda juga bisa mengganti latar di belakang bentuk.

Tambah lapisan

Arah Gradien
Seret di pratinjau. Untuk gradien linear dan konik, ini memutar sudut; untuk radial, ini memindahkan titik pusat.

Layer
Layer baru menambahkan gradien acak di atas. Sembunyikan layer dengan sakelarnya, atau tekan lama untuk menghapusnya.

Jenis Gradien
Pilih linear, radial, atau konik secara terpisah untuk setiap layer.

Sudut
Ketik nilai pasti jika butuh presisi.

Bentuk Pratinjau
Ganti bentuk di bagian atas untuk melihat gradien dalam berbagai konteks.

background: linear-gradient(90deg, #008000 0%, #dc143c 100%);