UTILS.
Privat sejak awal
▤

Generator CSS Gradient

Buat gradient linear atau radial dengan pratinjau langsung dan salin CSS-nya.

File tetap di perangkat ini

File diproses di browser, tidak pernah diunggah. Situs mengunduh kode dan aset yang diperlukan alat. Tanpa akun atau pelacak.

Gunakan Unduh untuk menyimpan alat ini sebagai satu file HTML untuk penggunaan offline.

Privasi →

Coba contoh lengkap

Contoh

Pilih tipe linear, atur sudut ke 135 dan warna ke #ff7e5f dan #feb47b. CSS-nya background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Menggeser titik pertama ke 20 membuat warna pertama tetap solid di 20% awal kotak.

Perlu diingat

0deg mengarah ke atas dan 90deg ke kanan, jadi 135deg berjalan dari sudut kiri atas ke kanan bawah. Jika ada teks di atas gradien, periksa kontrasnya terhadap kedua warna ujung.

Tentang alat ini

Buat gradient dua warna linear atau radial dengan memilih warna, posisi, dan sudut, lalu salin aturan background-nya. Pratinjau langsung berjalan sepenuhnya di browser Anda.

Pertanyaan yang sering diajukan

Apa itu sudut pada gradient linear?
Sudut menentukan arah transisi warna: 0° mengarah ke atas, 90° ke kanan, 180° ke bawah, dan seterusnya.
Kapan sebaiknya pakai radial alih-alih linear?
Gunakan radial untuk memancarkan warna ke luar dari titik tengah (seperti lampu sorot); linear memadukan warna sepanjang garis lurus.

Alat lainnya