Generator Gradien CSS Online Gratis
Buat gradien CSS linear, radial, dan konik yang indah dengan pratinjau langsung. Salin kode CSS seketika.
Who uses the Generator Gradien CSS?
- Developer frontend yang membuat gradien latar belakang untuk bagian hero dan komponen UI.
- Desainer yang membuat prototipe identitas visual berbasis gradien dan transisi warna merek.
- Pelajar CSS yang memahami sintaks gradien melalui builder visual dan interaktif.
How the Generator Gradien CSS works
Pilih jenis gradien: Linear, Radial, atau Conic.
Klik swatch warna pada color stop untuk mengubah warnanya menggunakan color picker.
Gunakan slider di samping setiap stop untuk mengatur posisinya, atau klik "+ Add color stop" untuk yang baru.
Sesuaikan sudut (linear/conic), lalu salin kode CSS dari panel output.
Tips & tricks
- Anda membutuhkan minimal 2 color stop — tombol hapus (×) hanya muncul setelah ada 3 stop atau lebih.
- Gradien radial menyembunyikan kontrol sudut karena gradien lingkaran yang berpusat di tengah tidak punya arah untuk diatur.
- Stop selalu ditampilkan berurutan sesuai posisi di CSS output, terlepas dari urutan Anda menambahkannya.
- Color picker tidak mendukung kanal alfa/transparansi — tambahkan rgba() secara manual di CSS yang disalin jika Anda butuh stop transparan.
Frequently Asked Questions
Apa sintaks CSS untuk gradien linear?
background: linear-gradient(arah, warna1, warna2). Contoh: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Arah bisa berupa sudut (45deg) atau kata kunci (to right, to bottom right).
Bagaimana cara membuat gradien radial?
background: radial-gradient(bentuk ukuran at posisi, warna1, warna2). Contoh: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Alat ini menghasilkan gradien radial lingkaran yang berpusat di tengah.
Bisakah saya menambahkan lebih dari dua color stop?
Bisa. Klik "+ Add color stop" sebanyak yang Anda butuhkan. Setiap stop punya color picker dan slider posisi masing-masing, dan stop diurutkan otomatis berdasarkan posisi di CSS output.
Bagaimana cara membuat gradien transparan?
Gunakan rgba() atau hex dengan alfa untuk stop transparan. Contoh: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) membuat efek memudar ke gelap — umum digunakan sebagai overlay di gambar hero untuk keterbacaan teks. Color picker alat ini tidak menyertakan kanal alfa, jadi edit CSS yang disalin secara manual untuk transparansi.
Apakah gradien CSS berfungsi di semua browser?
Gradien CSS didukung di semua browser modern (Chrome, Firefox, Safari, Edge, Opera). Prefix vendor (-webkit-) tidak wajib untuk browser modern, meski alat ini menyertakan baris dengan prefix -webkit- dalam outputnya untuk cakupan browser yang lebih lama.
Is my data safe when using the Generator Gradien CSS?
Completely safe. The Generator Gradien CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generator Gradien CSS output in commercial projects?
Yes. The Generator Gradien CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generator Gradien CSS follow official standards?
Yes. The Generator Gradien CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.