Pembuat Gradien Konis CSS Buat gradien konis CSS untuk bagan pie, roda warna, dan efek sapuan.

🎨

Pembuat Gradien Konis

Buat gradien konis CSS untuk bagan pie, roda warna, dan efek sapuan.

Tentukan Warna

Pilih tiga warna untuk sapuan konik.

Atur Pengaturan

Setel sudut awal dan posisi pusat.

Salin CSS

Salin kode CSS conic-gradient yang dihasilkan.

Loading tool...

What Is Pembuat Gradien Konis?

Pembuat gradien konik membuat gradien CSS yang menyapu sekitar titik pusat, bertransisi antara warna secara angular daripada linier atau radial. Gradien konik berputar di sekitar titik pusat, membuatnya ideal untuk menciptakan roda warna, segmen seperti bagan pie, wajah jam, dan transisi warna yang menyapu. Alat ini memungkinkan Anda memilih tiga warna, menyetel sudut awal, dan memposisikan titik pusat. Kode CSS conic-gradient() yang dihasilkan membuat transisi angular yang halus dan kembali ke warna awal. Gradien konik adalah fitur CSS yang kuat yang memungkinkan efek visual yang sebelumnya memerlukan SVG atau Canvas, menjaga desain Anda tetap murni CSS dan dipercepat GPU.

Why Use Pembuat Gradien Konis?

Buat transisi warna sudut yang melengkung tidak mungkin dengan gradien linier/radial
Sudut awal yang dapat disesuaikan untuk kontrol rotasi
Posisi pusat kustom untuk efek off-center
Ideal untuk latar belakang dekoratif dan visualisasi data
Keluaran CSS bersih untuk penggunaan produksi

Common Use Cases

Roda Warna

Buat latar belakang roda warna pelangi menggunakan gradien konik.

Grafik Pie

Bangun grafik pie sederhana dengan CSS saja dan henti warna yang keras.

Latar Belakang Dekoratif

Buat latar belakang gradien sudut unik untuk bagian dan kartu.

Pengisi Waktu

Desain pengisi waktu CSS saja dengan busur gradien konik.

Technical Guide

CSS conic-gradient() membuat transisi warna di sekitar titik pusat. Sintaksnya adalah: conic-gradient(from sudut at posX posY, warna1, warna2, ..., warna1). Sudut "from" memutar posisi awal (default 0deg = atas). Warna didistribusikan secara merata di sekitar sapuan 360° kecuali stop sudut eksplisit ditentukan. Mengulangi warna pertama sebagai stop terakhir membuat loop yang mulus. Untuk efek bagan pie, gunakan stop persentase: conic-gradient(merah 0% 25%, biru 25% 50%, hijau 50% 75%, kuning 75%). Gradien konik didukung di Chrome 69+, Firefox 83+, Safari 12.1+, dan Edge 79+. Mereka dapat dimasker dengan border-radius: 50% dan dikombinasikan dengan mask-image untuk bentuk kompleks.

Tips & Best Practices

1
Ulangi warna pertama sebagai henti terakhir untuk transisi melingkar yang mulus
2
Gunakan henti keras (persentase sama, dua warna) untuk segmen grafik pie
3
Gabungkan dengan border-radius: 50% untuk efek roda warna melingkar
4
Sudut "dari" memutar gradien seluruhnya - berguna untuk efek animasi
5
Tumpuk beberapa gradien konik untuk pola kompleks

Related Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Roda Harmoni Warna

Roda warna interaktif dengan lima jenis harmoni dan pemilihan visual.

🎨 Color Tools

Pembuat Gradien Linier

Buat gradien linier CSS dengan warna kustom, sudut, dan pemberhentian warna.

🎨 Color Tools

Pembuat Gradien Radial

Buat gradien radial CSS dengan bentuk, posisi, dan warna yang dapat disesuaikan.

🎨 Color Tools

Pembuat Filter CSS

Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

🎨 CSS & Design

Frequently Asked Questions

Q Apa itu gradien konik?

Gradien konik bertransisi antara warna di sekitar titik pusat, menyapu secara sudut seperti jarum jam. Ini berbeda dari gradien linier (garis lurus) dan radial (keluar dari pusat).

Q Bisakah saya membuat grafik pie dengan gradien konik?

Ya! Gunakan henti warna yang keras (dua warna pada persentase sama) untuk membuat segmen yang tajam. Contohnya: conic-gradient(merah 0% 30%, biru 30% 70%, hijau 70%).

Q Apakah gradien konik didukung dengan baik?

Ini didukung di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge. Ini adalah fitur CSS Images Level 4 dengan adopsi luas sejak tahun 2020.

About This Tool

Pembuat Gradien Konis is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.