Skip to content
Zoyku

Pembuat gradien CSS

Campur dua hingga lima warna menjadi gradien CSS linear, radial, atau konik dengan pratinjau langsung, kode siap tempel, dan palet harmonis sekali klik.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Alat ini berjalan sepenuhnya di browser Anda. Data Anda tidak pernah meninggalkan perangkat — tidak diunggah ke server mana pun.

Cara pakai

  1. 1Atur dua hingga lima warna, atau mulai dari palet preset.
  2. 2Pilih jenis gradien, lalu sudut atau bentuknya; kunci posisi bila perlu.
  3. 3Salin blok CSS dan tempelkan ke lembar gaya Anda.

Pembuat gradien CSS

Pilih dua hingga lima warna, tentukan linear, radial atau konik, lalu geser sudutnya — pratinjau diperbarui saat Anda mengetik dan CSS selalu sejauh satu salinan. Biarkan posisi sebuah pemberhenti kosong dan ia ditempatkan otomatis seperti yang CSS lakukan; tetapkan persentase persis untuk batas tegas dan perpaduan yang bergeser dari pusat.

Keluarannya adalah blok produksi sesungguhnya: baris warna solid cadangan untuk peramban lama, baris berawalan -webkit- untuk mesin WebKorban tua, dan sintaks standar di baris terakhir. Tombol harmonisasi acak memutar rona palet Anda di ruang HSL sehingga setiap pengocokan tetap seimbang, bukan saling bertabrakan.

Pertanyaan yang sering diajukan

Mengapa CSS menyertakan baris berawalan -webkit-?

Itu baris kompatibilitas untuk peramban WebKit lama (sekitar era Safari 5-6) yang hanya memahami -webkit-linear-gradient. Semua peramban dalam dekade terakhir membaca baris standar, jadi Anda boleh menghapus baris berawalan itu bila tidak perlu mendukung versi tersebut — menyimpannya hanya satu baris, menghapusnya tanpa biaya.

Apa arti sudut pada gradien linear?

Itu arah bergeraknya gradien, diukur searah jarum jam dari atas: 0deg dari bawah ke atas, 90deg dari kiri ke kanan, 180deg dari atas ke bawah. Alat ini menormalkan sudut apa pun (−45 menjadi 315) dan aturan arah terbalik pada sintaks lama sudah ditangani di baris -webkit-.

Alat terkait

Semua alat Utilitas →

Pemeriksa Kontras

Hitung rasio kontras WCAG antara dua warna beserta hasil AA dan AAA untuk teks normal dan besar, lengkap dengan pratinjau langsung. Semuanya berjalan di peramban Anda.

Semua alat →

Konverter Warna

Tempel warna dalam hex, rgb(), atau hsl() dan dapatkan ketiga formatnya plus baris tint dan shade siap pakai untuk design system Anda.

Semua alat →

Pemilih Warna

Pilih warna dari swatch atau ambil langsung dari layar Anda dengan API EyeDropper — hex, RGB, dan HSL tersalin sekali klik.

Semua alat →

Bingkai Gambar

Tambahkan bingkai warna solid atau transparan di sekeliling satu gambar atau satu batch penuh — pratinjau langsung, keluaran PNG atau JPG, di browser Anda.

Semua alat →

Sematkan alat ini

Tambahkan alat ini ke situs Anda dengan satu baris — berjalan di browser pengunjung.

<iframe src="https://zoyku.com/id/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing