Pembuat Gradien - Editor Gradien CSS Visual
Rancang gradien linear dan radial secara visual. Tambahkan titik warna, sesuaikan sudut, lihat pratinjau langsung, dan salin CSS. gratis.
프리셋
Apa Itu Pembuat Gradien?
Pembuat gradien adalah editor visual untuk membuat gradien CSS. Alih-alih menulis kode gradien secara manual, Anda memilih warna, mengatur posisi, dan menyesuaikan sudut — alat ini menghasilkan CSS secara langsung. Alat ini mendukung gradien linear (dengan kontrol sudut) dan gradien radial (dengan kontrol titik tengah), sehingga memudahkan untuk membuat transisi warna yang halus untuk latar belakang, tombol, dan elemen UI.
Cara Membuat Gradien CSS
- Pilih jenis — Pilih gradien Linear atau Radial
- Atur arah — Sesuaikan sudut (linear) atau titik tengah (radial)
- Edit titik warna — Ubah warna dan seret slider posisi
- Tambahkan lebih banyak titik — Klik "+ Tambah Titik" untuk gradien kompleks (hingga 8)
- Salin CSS — Klik tombol Salin untuk mendapatkan kode CSS
Mengapa Menggunakan Pembuat Gradien Ini?
- Editor Visual — Lihat gradien Anda diperbarui secara langsung saat Anda menyesuaikan
- Linear & Radial — Kedua jenis gradien dengan kontrol penuh
- Banyak Titik — Tambahkan hingga 8 titik warna untuk gradien kompleks
- Prasetel — 8 gradien prasetel yang indah untuk memulai
- CSS Sekali Klik — Salin kode CSS siap produksi secara instan
FreeToolbox vs Alat Gradien Lainnya
| Fitur | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| Pratinjau Langsung | Ya | Ya | Hanya statis |
| Titik Warna | Hingga 8 | Tidak terbatas | 2 (tetap) |
| Dukungan Radial | Ya | Ya | Tidak |
| Prasetel | 8 | Tidak Ada | 180 |
| Iklan | Minimal | Sedang | Minimal |
Pertanyaan umum
Apa perbedaan antara gradien linear dan radial?
Gradien linear bertransisi sepanjang garis lurus pada sudut yang ditentukan. Gradien radial bertransisi ke luar dari titik tengah dalam bentuk lingkaran atau elips.
Berapa banyak titik warna yang dapat saya tambahkan?
Hingga 8 titik warna. Anda memerlukan setidaknya 2 titik untuk membentuk gradien. Klik '+ Tambah Titik' untuk menambahkan lebih banyak.
Bisakah saya menghapus titik warna?
Ya. Klik tombol × di sebelah titik mana pun untuk menghapusnya, selama setidaknya 2 titik tersisa.
Bagaimana cara menggunakan prasetel?
Klik thumbnail prasetel apa pun di bagian bawah. Ini memuat warna prasetel dan mengatur jenis gradien menjadi linear pada 135°. Anda kemudian dapat menyesuaikannya lebih lanjut.
Apakah ini menghasilkan CSS lintas-browser?
CSS yang dihasilkan menggunakan sintaks gradien standar yang didukung oleh semua browser modern (Chrome, Firefox, Safari, Edge). Tidak diperlukan awalan vendor.