Generator Gradien CSS
Rancang gradien CSS linear, radial, dan konik yang indah dengan pratinjau langsung dan salin kodenya dengan satu klik
Pratinjau langsung
Jenis gradien
Color stop
Preset
Kode CSS
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Semuanya dibuat secara lokal di browser Anda. Tidak ada yang dikirim ke server.
Tentang alat ini
Generator gradien CSS ini memungkinkan Anda merancang perpaduan warna yang halus secara visual dan menyalin CSS siap tempel dengan satu klik. Pilih gradien linear, radial, atau konik, tambahkan color stop sebanyak yang Anda mau, dan sesuaikan warna setiap stop dengan pemilih warna bawaan atau bidang HEX serta posisi dari 0 hingga 100 persen. Untuk gradien linear Anda dapat mengatur sudut mana pun dari 0 hingga 360 derajat atau menggunakan tombol arah cepat; gradien radial mendukung bentuk lingkaran atau elips, dan gradien konik memutar warna mengelilingi titik tengah. Pratinjau langsung berukuran besar diperbarui secara instan sehingga Anda melihat persis apa yang Anda buat. Mulailah dari salah satu preset pilihan, tekan tombol acak untuk ide baru, lalu salin properti background yang dihasilkan ke stylesheet Anda. Semuanya berjalan secara lokal di browser, jadi cepat, pribadi, dan berfungsi offline.
Cara menggunakan
- 1 Pilih jenis gradien — linear, radial, atau konik.
- 2 Tambahkan color stop, lalu atur warna setiap stop (pemilih atau HEX) dan posisinya dari 0 hingga 100%.
- 3 Sesuaikan sudut untuk gradien linear dan konik, atau bentuk untuk yang radial — atau muat preset.
- 4 Perhatikan pratinjau langsung, lalu klik Salin CSS untuk menempelkan properti background ke proyek Anda.
Cara kerjanya
Alat ini menyusun fungsi gradien CSS standar dari pengaturan Anda. Gradien linear menggunakan linear-gradient(sudut, stop), di mana sudut mengarahkan garis gradien dan setiap color stop ditulis sebagai warna diikuti posisi persentase. Gradien radial menggunakan radial-gradient(bentuk at center, stop) untuk menyebarkan warna keluar dari tengah, dan gradien konik menggunakan conic-gradient(from sudut at center, stop) untuk memutar warna mengelilingi sebuah titik. Color stop diurutkan otomatis berdasarkan posisi sebelum output, jadi urutan penambahannya tidak penting. Posisi dibatasi pada 0-100% dan minimal dua stop selalu dipertahankan, sehingga CSS yang dihasilkan selalu valid. Hasilnya adalah deklarasi background sederhana yang dapat Anda gunakan di browser modern mana pun tanpa prefiks.
Pertanyaan yang sering diajukan
Apa perbedaan antara gradien linear, radial, dan konik?
Gradien linear memadukan warna sepanjang garis lurus yang arahnya Anda atur dengan sudut. Gradien radial menyebarkan warna keluar dari titik tengah dalam bentuk lingkaran atau elips. Gradien konik memutar warna mengelilingi titik tengah, berguna untuk diagram lingkaran, roda warna, dan efek sudut. Ketiganya adalah CSS bawaan dan didukung setiap browser modern.
Berapa banyak color stop yang dapat saya tambahkan?
Anda dapat menambahkan color stop sebanyak yang Anda perlukan; alat ini selalu mempertahankan minimal dua agar gradien tetap valid. Setiap stop punya warnanya sendiri dan posisi dari 0 hingga 100 persen. Menambahkan lebih banyak stop memungkinkan Anda membuat pelangi, latar multi-warna, dan transisi banyak warna yang halus.
Apa fungsi kontrol sudut?
Untuk gradien linear, sudut menentukan arah garis warna: 0 derajat menunjuk ke atas, 90 ke kanan, 180 ke bawah, dan 270 ke kiri, sehingga Anda dapat mengarahkan perpaduan ke mana saja. Untuk gradien konik, sudut menentukan rotasi awal sapuan. Anda dapat menyeret penggeser, mengetik nilai persis, atau menggunakan tombol arah cepat.
Apakah CSS yang dihasilkan siap dipakai di produksi?
Ya. Outputnya adalah properti background standar yang menggunakan fungsi gradien bawaan yang bekerja di semua browser terkini tanpa prefiks vendor. Cukup salin barisnya dan tempel ke stylesheet, inline style, atau komponen Anda. Anda dapat mengubah nama properti menjadi background-image jika ingin mempertahankan warna latar terpisah.
Apakah data saya dikirim ke mana pun?
Tidak. Seluruh generator berjalan di browser Anda menggunakan JavaScript dan CSS. Tidak ada informasi tentang warna atau gradien Anda yang diunggah atau disimpan di server, jadi alat ini bersifat pribadi dan tetap berfungsi meski Anda terputus dari internet.
Alat dan kegunaan terkait
Padukan generator gradien dengan konverter warna untuk memilih nilai HEX, RGB, dan HSL yang tepat, serta pemeriksa kontras untuk memastikan teks tetap terbaca di atas gradien Anda. Desainer dan pengembang menggunakannya untuk membuat latar hero, tombol, kartu, lencana, dan efek dekoratif untuk situs web dan aplikasi.