Generator Gradien CSS
Buat gradien CSS linear, radial, atau konik dengan perhentian warna khusus dan sudut, pratinjau hasilnya secara langsung, dan salin aturan background yang siap ditempel.
Generator Gradien CSS — Pilih jenis gradien, atur sudut, dan tambahkan sebanyak mungkin perhentian warna yang Anda perlukan — masing-masing dengan warna dan persentase posisinya sendiri. Kotak pratinjau langsung diperbarui saat Anda mengedit, dan aturan CSS background yang siap ditempel ditampilkan untuk disalin dengan satu klik. Semuanya berjalan sepenuhnya di browser Anda; tidak ada warna atau CSS yang pernah dikirim ke server.
Apa itu Generator Gradien CSS?
Generator Gradien CSS adalah alat daring gratis untuk desainer web dan pengembang front-end yang membutuhkan gradien cepat tanpa menulis sintaksnya secara manual. Pilih gradien linear, radial, atau konik, atur sudut dalam derajat untuk jenis linear dan konik, dan tentukan perhentian warna dengan masing-masing satu warna HEX dan persentase posisi. Saat Anda mengedit, pratinjau langsung menampilkan hasilnya dan aturan CSS background yang sesuai diperbarui seketika sehingga Anda bisa menyalinnya langsung ke lembar gaya. Gunakan untuk mendesain tombol, latar belakang hero, kartu, dan overlay, atau untuk mempelajari cara kerja fungsi linear-gradient(), radial-gradient(), dan conic-gradient().
Cara menggunakan Generator Gradien CSS
- Pilih jenis gradien: Linear, Radial, atau Konik.
- Untuk gradien linear atau konik, atur sudut dalam derajat (0-360); radial menggunakan lingkaran terpusat dan mengabaikan sudut.
- Edit setiap perhentian warna: ketik atau pilih warna HEX dan atur posisinya sebagai persentase (0-100).
- Klik Tambah perhentian untuk menyisipkan warna lain, atau ikon tempat sampah untuk menghapus perhentian (minimal dua perhentian dipertahankan).
- Perhatikan kotak pratinjau langsung diperbarui, lalu salin aturan CSS background yang dihasilkan dengan tombol salin.
Contoh
Gradien linear dua warna sederhana
Masukan
Linear, 90deg, #4f86f7 di 0% dan #9333ea di 100%
Keluaran
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
Gradien radial tiga perhentian
Masukan
Radial, perhentian #ffffff 0%, #4f86f7 50%, #1e3a8a 100%
Keluaran
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
Gradien konik untuk roda warna
Ubah jenis ke Konik, atur sudut awal, dan tambahkan beberapa perhentian pada posisi berjarak sama untuk menyapukan warna mengelilingi titik pusat — berguna untuk sampel mirip diagram lingkaran atau spinner pemuatan.
Pertanyaan yang sering diajukan
- Jenis gradien apa saja yang didukung?
- Tiga: linear-gradient (dengan sudut dalam derajat), radial-gradient (lingkaran terpusat), dan conic-gradient (dengan sudut awal). Beralih di antaranya dengan pengalih jenis dan CSS diperbarui seketika.
- Bagaimana perhentian warna dan posisi bekerja?
- Setiap perhentian memiliki warna dan persentase posisi dari 0 hingga 100. Perhentian ditulis ke dalam CSS sesuai urutan kemunculannya dalam daftar, persis seperti yang ditafsirkan browser, jadi Anda mengontrol urutannya secara langsung. Anda dapat menambahkan perhentian dengan Tambah perhentian dan menghapusnya hingga minimal dua.
- Bisakah saya memilih warna secara visual alih-alih mengetik HEX?
- Ya. Klik chip warna kecil di samping setiap perhentian untuk membuka pemilih warna bawaan browser Anda, atau ketik nilai HEX seperti #4f86f7 langsung di bidang warna. Pratinjau dan CSS diperbarui saat Anda mengubahnya.
- Mengapa bidang sudut menghilang untuk gradien radial?
- Gradien radial di sini digambar sebagai lingkaran terpusat, yang tidak menggunakan sudut, sehingga bidang sudut hanya ditampilkan untuk jenis linear dan konik tempat sudut mengubah arah.
- 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.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi kartu PNG yang rapi dengan penyorotan sintaksis di browser Anda, dengan tema, latar gradien atau transparan, dan padding — tanpa unggah.
Pemeriksa Kontras Warna
Periksa rasio kontras WCAG antara warna HEX latar depan dan latar belakang serta lihat apakah lolos AA dan AAA untuk teks normal maupun besar.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala gradasi 50-950 bergaya Tailwind, dicampur ke arah putih dan hitam, setiap langkah dengan sampel dan HEX yang bisa disalin.