Pembuat Gradien

Gradien OKLCH yang seragam secara persepsi, tanpa pita abu-abu, ekspor CSS satu klik.

Profil →Posisi0%

Profil →Posisi100%

Sudut90°Interpolasi halus (tanpa zona mati)

Perpustakaan gradien

48 kombinasi klasik komunitas — klik untuk menerapkan titik henti, jenis, dan sudut sekaligus.

Matahari terbenam

Lautan

Hutan

Permen

Senja

Redup

Kode CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Cara kerja alat gradien - buat stop, sesuaikan, salin CSS.

2-6 stop dengan posisi bebas, interpolasi OKLCH tanpa pita kabur, ditambah 48 preset terpilih.

01
Buat stop
2-6 stop: pilih setiap warna, seret posisi, atau tempel nilai HEX.
02
Sesuaikan
Beralih antara linear/radial/conic, seret sudut - atau terapkan preset terpilih dengan satu klik.
03
Salin
Mode halus memperluas titik tengah OKLCH secara otomatis; CSS yang disalin siap pakai dan tautan menyimpan gradien Anda.

FAQ Gradien

Empat pertanyaan yang sebenarnya ditanyakan pengguna.

Mengapa gradien menjadi abu-abu di tengah?: Interpolasi RGB melewati wilayah dengan saturasi rendah. Interpolasi OKLCH mengikuti hue, sehingga bagian tengah tetap bersih.
Bisakah saya menambahkan lebih banyak titik henti?: Ya - 2 hingga 6 titik henti, masing-masing dengan warna dan posisinya sendiri. Mode halus menyisipkan titik tengah OKLCH di antara tetangga sehingga seluruh gradien tetap bersih.
Browser mana yang menjalankan CSS yang diekspor?: Semua browser modern. Alat ini menghasilkan titik henti RGB biasa, sehingga tidak diperlukan konversi bahkan untuk mesin yang lebih lama.
Bagaimana cara membagikan gradien?: Setiap penyesuaian disinkronkan ke URL halaman (#g=...). Kirim tautan dari bilah alamat ke rekan kerja dan gradien akan terbuka persis seperti yang Anda sesuaikan.

Setelah Anda mendapatkan hasilnya

Lanjutkan dari sini dan gunakan warna-warna tersebut.

Pembuat Skala

Ubah warna apa pun menjadi skala sistem desain 11-langkah, merata secara persepsi di OKLCH, kontras WCAG per langkah, ekspor ke Tailwind/CSS/SCSS/JSON.

Konverter Warna

Ketik format apa pun (HEX / RGB / HSL / nama) dan konversikan ke semua ruang warna secara real time.

Papan Palet

Spasi untuk acak, kunci, seret untuk mengatur ulang, bagikan melalui URL — semua yang seharusnya dilakukan papan palet.

Pemeriksa Kontras

Validasi kontras WCAG 2.1 antara warna latar depan dan latar belakang apa pun.

Cara kerja alat gradien - buat stop, sesuaikan, salin CSS.

2-6 stop dengan posisi bebas, interpolasi OKLCH tanpa pita kabur, ditambah 48 preset terpilih.

Buat stop

2-6 stop: pilih setiap warna, seret posisi, atau tempel nilai HEX.

Sesuaikan

Beralih antara linear/radial/conic, seret sudut - atau terapkan preset terpilih dengan satu klik.

Salin

Mode halus memperluas titik tengah OKLCH secara otomatis; CSS yang disalin siap pakai dan tautan menyimpan gradien Anda.

FAQ Gradien

Empat pertanyaan yang sebenarnya ditanyakan pengguna.

Mengapa gradien menjadi abu-abu di tengah?

Interpolasi RGB melewati wilayah dengan saturasi rendah. Interpolasi OKLCH mengikuti hue, sehingga bagian tengah tetap bersih.

Bisakah saya menambahkan lebih banyak titik henti?

Ya - 2 hingga 6 titik henti, masing-masing dengan warna dan posisinya sendiri. Mode halus menyisipkan titik tengah OKLCH di antara tetangga sehingga seluruh gradien tetap bersih.

Browser mana yang menjalankan CSS yang diekspor?

Semua browser modern. Alat ini menghasilkan titik henti RGB biasa, sehingga tidak diperlukan konversi bahkan untuk mesin yang lebih lama.

Bagaimana cara membagikan gradien?

Setiap penyesuaian disinkronkan ke URL halaman (#g=...). Kirim tautan dari bilah alamat ke rekan kerja dan gradien akan terbuka persis seperti yang Anda sesuaikan.