Generator Gradien Konik
Bangun nilai CSS conic-gradient() secara visual dengan pratinjau diagram pai interaktif. Tambahkan hingga 12 perhentian warna dengan kontrol posisi presisi, atur sudut awal dan posisi tengah, lalu salin CSS seketika. Pilih dari 6 preset (Pelangi, Senja, Samudra, Neon, Pastel, Api) untuk mulai cepat. Sepenuhnya privat, 100% gratis, dan tanpa pendaftaran.
Presets
Preview
Color Stops (5)
background: conic-gradient(from 0deg at 50% 50%, #FF6B6B 0%, #FDCB6E 25%, #55EFC4 50%, #74B9FF 75%, #A29BFE 100%);
Mengapa Menggunakan Generator Gradien Konik Kami?
- Pratinjau Gradien Konik Instan: generator memperbarui pratinjau diagram pai dan bilah gradien pada setiap perubahan - tanpa tombol yang perlu ditekan. Sesuaikan perhentian warna, sudut, atau posisi apa pun dan lihat hasilnya seketika.
- Pratinjau Diagram Pai Interaktif: diagram pai berbasis Canvas menunjukkan persis bagaimana gradien konik Anda akan dirender. Setiap perhentian warna memetakan ke satu irisan, dengan sudut awal ditandai jelas oleh garis putus-putus. Bilah gradien linear di bawahnya memberi tampilan referensi tambahan.
- 100% Privat - Tanpa Unggah: semua pembuatan gradien terjadi lokal di browser Anda. Nilai warna Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server mana pun.
- Gratis & Tanpa Batas: hasilkan gradien konik tanpa batas tanpa pendaftaran, langganan, dan batas penggunaan. Hingga 12 perhentian warna per gradien. Sepenuhnya gratis selamanya.
Kasus Penggunaan Umum Generator Gradien Konik
- Latar CSS & Elemen UI: pengembang frontend memakai generator untuk membuat latar CSS menarik, batas bergradien, dan spinner pemuatan. Gradien konik sempurna untuk elemen UI melingkar dan indikator roda warna.
- Visualisasi Data & Grafik: desainer visualisasi data memakai gradien konik sebagai isian diagram donat, latar pengukur, dan indikator progres melingkar. Pratinjau diagram pai memudahkan melihat bagaimana gradien memetakan data melingkar.
- Roda Warna & Alat Harmoni: desainer memakai generator untuk membuat roda warna dan visualisasi harmoni warna. Kemampuan menetapkan posisi perhentian warna secara presisi membuatnya ideal untuk menunjukkan hubungan warna.
- Desain Komponen UI: desainer UI memakai gradien konik untuk tombol, kartu, avatar, dan latar lencana yang memerlukan efek gradien melingkar. Kontrol posisi tengah memungkinkan penempatan presisi titik asal gradien.
- Desain Merek & Pemasaran: desainer merek memakai gradien konik di bagian hero, perlakuan logo, dan materi pemasaran untuk membuat efek visual modern yang khas dan menonjol dibanding desain gradien linear.
- Eksperimen Kreatif: profesional kreatif memakai generator untuk menjelajahi efek visual baru dan menemukan kombinasi warna tak terduga. Pratinjau real-time membuat eksperimen cepat dan menyenangkan.
Apa Itu Gradien Konik?
Gradien konik adalah gradien CSS yang mentransisikan warna mengelilingi titik tengah, berputar 360 derajat - seperti roda warna atau diagram pai. Berbeda dari gradien linear (yang berjalan lurus) atau gradien radial (yang memancar keluar dalam lingkaran), gradien konik melingkari titik pusat, membuatnya ideal untuk desain melingkar, roda warna, dan efek diagram donat. Fungsi CSS-nya adalah conic-gradient() dan merupakan bagian dari CSS Images Module Level 4.
Cara Kerja Generator Gradien Konik Kami
- Tambahkan perhentian warna: mulai dengan palet default 5 warna atau klik preset. Setiap perhentian warna punya pemilih warna, input hex, dan penggeser posisi (0-100%) yang menentukan di mana warna muncul pada lingkaran.
- Sesuaikan sudut dan posisi: kontrol sudut awal memutar seluruh gradien (0-360°). Kontrol posisi tengah (X/Y) menggeser titik pusat gradien - 50%/50% menempatkannya di tengah, sedangkan 0%/0% di sudut kiri atas.
- Pratinjau dan salin: diagram pai Canvas merender gradien Anda secara real time dengan garis putus-putus yang menunjukkan sudut awal. Keluaran CSS diperbarui otomatis. Klik “Salin CSS” untuk menyalin deklarasi background lengkap.
Gradien Konik vs Linear vs Radial
- Gradien linear mentransisikan warna sepanjang garis lurus (atas-bawah, kiri-kanan, atau sudut apa pun). Terbaik untuk latar, tombol, dan bagian header yang memerlukan transisi warna terarah.
- Gradien radial mentransisikan warna keluar dari titik tengah dalam lingkaran atau elips. Terbaik untuk efek sorotan, tombol bercahaya, dan bayangan yang terlihat alami.
- Gradien konik mentransisikan warna mengelilingi titik tengah dalam sapuan melingkar. Terbaik untuk roda warna, diagram donat, spinner pemuatan, batas bergradien pada elemen melingkar, dan desain apa pun yang memerlukan transisi warna melingkar.
- Kapan memilih konik: gunakan gradien konik saat Anda ingin warna melingkari sebuah lingkaran - hal ini tidak bisa ditiru dengan gradien linear atau radial. Gradien konik sangat efektif untuk elemen UI yang menyiratkan rotasi, progres, atau perilaku siklik.
Dukungan Browser & Praktik Terbaik
Gradien konik CSS didukung di semua browser modern - Chrome 69+, Firefox 83+, Safari 12.1+, dan Edge 79+. Untuk browser lama, gradien konik terdegradasi dengan baik: browser akan menampilkan warna latar cadangan. Selalu tetapkan background-color cadangan sebelum deklarasi gradien Anda.
Tips performa: gradien konik dipercepat GPU dan berperforma baik untuk sebagian besar kasus. Namun, hindari menganimasikan gradien konik pada elemen besar atau memakainya pada elemen yang sering digambar ulang (seperti latar saat menggulir), karena komputasi gradien dapat memengaruhi laju bingkai.
Pertanyaan yang Sering Diajukan
Generator gradien konik adalah alat visual yang membantu Anda membangun nilai CSS conic-gradient() tanpa menulis kode. Generator kami menyediakan pratinjau diagram pai interaktif, pengelolaan perhentian warna dengan pemilih warna, kontrol sudut awal dan posisi tengah, preset untuk mulai cepat, dan salin CSS sekali klik agar langsung bisa dipakai di proyek Anda.
Tambahkan perhentian warna memakai pemilih warna atau input hex, lalu atur posisinya dengan penggeser untuk menentukan di mana setiap warna muncul pada lingkaran. Gunakan penggeser Sudut Awal untuk memutar seluruh gradien. Sesuaikan Pusat X dan Pusat Y untuk memindahkan titik asal gradien. Pratinjau diagram pai diperbarui secara real time. Klik “Salin CSS” saat hasilnya sudah sesuai.
Gradien radial mentransisikan warna keluar dari titik tengah dalam lingkaran, menciptakan efek sasaran. Gradien konik mentransisikan warna mengelilingi titik tengah dalam sapuan melingkar, menciptakan efek diagram pai atau roda warna. Radial baik untuk efek sorotan, sedangkan konik sempurna untuk roda warna, diagram donat, dan indikator progres melingkar.
Anda bisa menambahkan hingga 12 perhentian warna. Setiap perhentian punya pemilih warna dan penggeser posisi sendiri. Minimal dibutuhkan 2 perhentian. Gunakan tombol “Tambah Perhentian” untuk menambah dan ikon tempat sampah untuk menghapus yang tidak perlu.
Sudut awal (0-360°) menentukan di mana perhentian warna pertama dimulai pada lingkaran. Secara default dimulai pada 0° (atas). Garis putus-putus pada pratinjau diagram pai menunjukkan posisi sudut awal. Memutar sudut awal menggeser semua warna di lingkaran dengan besar yang sama.
Pusat X dan Pusat Y (0-100%) mengatur di mana titik asal gradien ditempatkan di dalam elemen. 50%/50% menempatkannya tepat di tengah. 0%/0% di sudut kiri atas. 100%/100% di sudut kanan bawah. Ini parameter “at position” pada fungsi CSS conic-gradient().
Ya. Generator gradien konik 100% gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan. Hasilkan gradien tanpa batas tanpa pembatasan atau biaya tersembunyi.
Gradien konik CSS didukung di semua browser modern: Chrome 69+, Firefox 83+, Safari 12.1+, dan Edge 79+. Untuk browser lama, gradien konik terdegradasi dengan baik: browser akan menampilkan warna latar cadangan. Selalu tetapkan background-color cadangan sebelum deklarasi gradien Anda.