Kapan saya harus menggunakan gradien konik?

Gradien konik sempurna untuk efek pie-chart, roda warna, dan latar belakang berputar abstrak. Mereka menyapu di sekitar titik pusat, yang merupakan sesuatu yang tidak dapat dilakukan gradien linier maupun radial. Dukungan peramban sekarang solid di seluruh mesin modern.

Bagaimana cara menghindari tengah kusam pada gradien dua warna?

Tambahkan titik perantara dengan warna yang seimbang secara perseptual, atau pilih warna dengan lightness yang serupa. Mencampur warna komplementer melalui titik tengah RGB-nya menghasilkan abu-abu — memilih titik tengah secara manual dalam OKLCH menghindarinya.

Dapatkah saya mengekspor ke format lain?

Keluarannya adalah CSS standar, yang bekerja langsung di konteks web mana pun. Untuk alat desain, salin titik warna individual dan replikasi gradien di Figma atau Sketch.

Apakah ia mendukung transparansi?

Ya. Setiap titik warna dapat memiliki saluran alpha. Berguna untuk memudarkan tepi ke latar belakang atau melapisi gradien dengan titik semi-transparan.

Apakah data saya dikirim ke mana pun?

Tidak. Pembuatan berjalan sepenuhnya di peramban Anda.

Generator Gradien CSS — Linear, Radial

Bangun gradien CSS linier dan radial secara visual, di peramban Anda. Toova memungkinkan Anda menempatkan titik warna, menyetel sudut, beralih tipe, dan mengekspor CSS yang siap ditempelkan — semua tanpa mengunggah apa pun ke server.

Gradien linier, radial, dan konik

Gradien linier bergerak sepanjang sumbu lurus yang didefinisikan oleh sudut atau kata kunci arah. Gradien radial mengembang dari titik pusat. Gradien konik menyapu di sekitar sudut — sempurna untuk latar belakang gaya pie-chart atau efek roda warna. Toova mengekspos ketiganya dengan kontrol visual, sehingga Anda dapat membangun gradien yang Anda inginkan tanpa menghafal setiap varian sintaks CSS.

Titik warna dan easing

Seret titik warna sepanjang batang gradien untuk mengontrol di mana setiap warna dimulai dan berakhir. Tambahkan sebanyak mungkin titik yang Anda butuhkan — Toova tidak membatasinya. Gunakan preset easing untuk memperkenalkan interpolasi non-linier, yang menghindari tengah abu-abu kusam yang melanda gradien dua warna sederhana. Keluaran CSS menggunakan properti standar yang didukung di setiap peramban modern.

Pembuatan hanya peramban

Setiap gradien dihasilkan secara lokal di peramban Anda. Warna yang Anda pilih, titik yang Anda tempatkan, CSS keluaran — tidak ada yang meninggalkan halaman. Itu berlebihan untuk gradien, tetapi itu berarti alat cepat dan andal, dan halaman bekerja secara luring setelah pemuatan pertama. Tab Network akan tetap kosong selama penggunaan.

Pertanyaan yang Sering Diajukan

Kapan saya harus menggunakan gradien konik?: Gradien konik sempurna untuk efek pie-chart, roda warna, dan latar belakang berputar abstrak. Mereka menyapu di sekitar titik pusat, yang merupakan sesuatu yang tidak dapat dilakukan gradien linier maupun radial. Dukungan peramban sekarang solid di seluruh mesin modern.
Bagaimana cara menghindari tengah kusam pada gradien dua warna?: Tambahkan titik perantara dengan warna yang seimbang secara perseptual, atau pilih warna dengan lightness yang serupa. Mencampur warna komplementer melalui titik tengah RGB-nya menghasilkan abu-abu — memilih titik tengah secara manual dalam OKLCH menghindarinya.
Dapatkah saya mengekspor ke format lain?: Keluarannya adalah CSS standar, yang bekerja langsung di konteks web mana pun. Untuk alat desain, salin titik warna individual dan replikasi gradien di Figma atau Sketch.
Apakah ia mendukung transparansi?: Ya. Setiap titik warna dapat memiliki saluran alpha. Berguna untuk memudarkan tepi ke latar belakang atau melapisi gradien dengan titik semi-transparan.
Apakah data saya dikirim ke mana pun?: Tidak. Pembuatan berjalan sepenuhnya di peramban Anda.