Generator Gradien CSS

Apa itu Generator Gradien CSS?

Generator Gradien CSS adalah alat gratis di browser untuk desainer web dan pengembang front-end yang ingin membuat gradien secara visual alih-alih menulis sintaks secara manual. Pilih linear, radial, atau konik — dengan varian berulang opsional — lalu edit perhentian warna pada bilah pratinjau yang bisa diseret atau di baris per perhentian dengan bidang warna HEX dan posisi. Gradien radial menyediakan bentuk lingkaran/elips, kata kunci ukuran (closest-side, closest-corner, farthest-side, farthest-corner) dan pusat at X% Y%, sedangkan konik menerima sudut awal dan pusat. Anda dapat menumpuk beberapa lapisan gradien ke dalam satu latar yang dipisahkan koma, menghasilkan gradien acak, menerapkan preset palet pilihan, memutar rona setiap perhentian, dan menyalin aturan background yang siap tempel.

Cara menggunakan Generator Gradien CSS

1. Pilih jenis gradien — Linear, Radial, atau Konik — dan aktifkan Berulang di opsi untuk pola berulang.
2. Seret perhentian di sepanjang bilah pratinjau untuk memindahkannya, klik titik kosong pada bilah untuk menambah perhentian, atau klik ganda perhentian untuk menghapusnya.
3. Sempurnakan setiap perhentian dengan bidang warna HEX dan posisinya, atau gunakan pipet (jika didukung) untuk mengambil warna dari layar Anda.
4. Untuk gradien radial, atur bentuk (lingkaran atau elips), kata kunci ukuran, dan pusat X/Y; untuk konik, sudut awal dan pusat.
5. Tambahkan lebih banyak lapisan untuk menumpuk gradien ke satu latar, coba Acak, terapkan palet, atau putar semua rona sekaligus.
6. Salin aturan CSS background yang dihasilkan dan tempel ke lembar gaya Anda.

Contoh

Linear, 90deg, #4f86f7 di 0% dan #9333ea di 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Lapisan 1 linear 90deg; Lapisan 2 radial circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Pertanyaan yang sering diajukan

Jenis gradien dan opsi apa saja yang didukung?

Gradien linear, radial, dan konik, masing-masing dengan varian berulang opsional. Radial menambahkan bentuk lingkaran/elips, kata kunci ukuran (closest-side, closest-corner, farthest-side, farthest-corner) dan pusat at X% Y%; konik menambahkan sudut awal dan pusat. Anda juga bisa menumpuk beberapa lapisan ke dalam satu latar.

Bagaimana cara kerja bilah perhentian yang bisa diseret?

Seret perhentian mana pun di sepanjang bilah untuk mengubah posisinya, klik bagian kosong bilah untuk menyisipkan perhentian baru dengan warna interpolasi, dan klik ganda perhentian untuk menghapusnya (minimal dua dipertahankan). Setiap perhentian juga memiliki bidang warna HEX dan posisi di bawah bilah.

Bisakah saya mengambil warna dari layar saya?

Ya, di browser yang mendukung EyeDropper API. Jika tersedia, tombol pipet muncul di samping setiap perhentian; klik lalu pilih piksel mana pun di layar. Anda selalu bisa mengetik nilai HEX atau menggunakan chip warna bawaan.

Apa fungsi Acak, palet, dan putar rona?

Acak mengganti lapisan aktif dengan gradien acak baru, preset palet menukar perhentian lapisan aktif dengan kumpulan warna pilihan, dan Putar rona menggeser rona setiap perhentian di setiap lapisan sekaligus. Semuanya hanya mengubah gradien saat Anda mengekliknya.

Apakah warna atau CSS saya diunggah ke suatu tempat?

Tidak. Gradien dibangun sepenuhnya di browser Anda dengan perhitungan string dan warna lokal — tidak ada warna, CSS, atau pengaturan yang pernah dikirim ke server, sehingga berfungsi offline dan menjaga pekerjaan Anda tetap privat.