Pembuat Gradien

Rancang gradien linear, radial, dan kerucut lalu ekspor CSS atau gambar

File tidak meninggalkan perangkat Anda
Berjalan di browser
Gratis, tanpa daftar, tanpa watermark

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Cara memakai Pembuat Gradien

Bangun gradien linear, radial, dan kerucut dengan sebanyak mungkin perhentian warna, dicampur dalam sRGB, OKLab, atau OKLCH. Salin hasilnya sebagai CSS, kelas Tailwind, atau SVG, atau unduh sebagai gambar PNG, JPG, atau WebP hingga 8192 px per sisi.

1
Pilih Tipe (Linear, Radial, atau Kerucut) lalu atur Sudut, Bentuk, atau pusat; untuk radial dan kerucut Anda bisa menyeret pratinjau untuk memindahkan pusat.
2
Edit Perhentian warna: klik batang untuk menambah perhentian, seret gagang untuk memindahkannya, lalu ubah setiap warna dan posisi di daftar.
3
Pilih cara Campur warna dalam (sRGB, OKLab, atau OKLCH), atau mulai dari salah satu Preset atau Acak.
4
Salin kode dari tab CSS, Tailwind, atau SVG.
5
Untuk gambar, atur Lebar dan Tinggi atau pilih ukuran, pilih PNG, JPG, atau WebP, lalu klik Unduh.

Pertanyaan umum

Apa bedanya pencampuran sRGB, OKLab, dan OKLCH?

sRGB adalah pencampuran CSS klasik, di mana warna komplementer bisa menjadi abu-abu di tengah. OKLab merata secara persepsi, tanpa titik tengah yang keruh. OKLCH menjaga warna tetap hidup dengan bergerak mengelilingi roda rona.

Apakah gradien OKLab dan OKLCH bekerja di browser lama?

Keluaran CSS dimulai dengan baris cadangan yang memakai perhentian yang sudah dihitung untuk browser tanpa dukungan “in oklab” atau “in oklch”. Kode SVG dan gambar yang diunduh juga memakai perhentian yang sudah dihitung, jadi tampilannya sama di mana pun.

Mengapa tab SVG dinonaktifkan untuk gradien kerucut?

SVG tidak punya gradien kerucut. Unduh gambar PNG, JPG, atau WebP sebagai gantinya.

Bisakah saya memakai perhentian transparan?

Ya, warna dengan alfa seperti rgba() atau #rrggbbaa bisa dipakai. Unduh PNG atau WebP untuk mempertahankan transparansi, karena JPG tidak punya kanal alfa.

Apakah gambar dibuat di server?

Tidak. Gambar digambar di kanvas di browser Anda dan disimpan langsung, pada ukuran apa pun dari 1 hingga 8192 px per sisi.

Bagaimana cara menyetel perhentian dengan keyboard?

Fokuskan gagang perhentian lalu gunakan tombol panah untuk menggesernya 1% (Shift untuk 10%), Home atau End untuk melompat ke ujung, dan Delete untuk menghapusnya. Gradien selalu mempertahankan setidaknya dua perhentian.