cv.cm
Semua alat

Generator gradien CSS

Berjalan di tab ini. Tidak ada unggahan.

CSS

Cara memakai alat ini

Rancang gradien latar CSS dan salin kodenya. Tidak ada unggahan.

  1. Pilih jenis atau preset

    Mulai dari preset atau Acak, lalu pilih linear, radial, atau conic dan atur sudut atau bentuknya.

  2. Atur warnanya

    Ubah setiap warna dan geser posisinya. Tambahkan hingga enam warna; × menghapus satu.

  3. Salin CSS

    Tekan Salin CSS dan tempel ke stylesheet Anda, atau pilih ukuran lalu Simpan PNG untuk wallpaper.

Panduan

Tanya jawab

Bagaimana cara membuat gradien CSS?

Pilih jenis (linear, radial, atau conic), atur warna dan posisinya, lalu sesuaikan sudut atau bentuk. CSS diperbarui seiring Anda mengatur; tekan Salin CSS.

Apa itu color stop (titik warna)?

Sebuah warna pada posisi tertentu di sepanjang gradien, dari 0% hingga 100%. Tambahkan hingga enam titik; gradien memadukan warna di antaranya sesuai urutan posisi.

Mengapa ada dua baris background?

Baris pertama adalah warna solid untuk browser yang sangat lama; baris kedua adalah gradiennya. Semua browser saat ini memakai gradien.

Bisakah saya menyimpan gradien sebagai gambar?

Bisa. Pilih ukuran (desktop, ponsel, 1440p, atau persegi) dan tekan Simpan PNG. Gambar dibuat di browser Anda.

Linear, radial, atau conic?

Linear memadukan warna di sepanjang garis pada suatu sudut (90° dari kiri ke kanan). Radial menyebar dari tengah sebagai lingkaran atau elips. Conic berputar mengelilingi tengah seperti roda warna.