CSS Gradient Generator – Linear, Radial, Conic
Pilih titik warna dan sudutnya, kode CSS gradiennya siap disalin.
Teks dan file Anda tetap di browser — tidak ada yang dikirim ke server.
Klik bagian kosong pada bilah untuk menambah titik, atau seret pegangan untuk memindahkannya.
Baris background-color adalah warna rata-rata untuk lingkungan yang tidak bisa menampilkan gradien.
Cara pakai
- Pilih jenisnya – linear, radial, atau conic – lalu atur sudut atau titik pusatnya.
- Tambah titik warna dengan mengeklik bilah atau tombol "Tambah titik". Seret pegangan atau ketik persentase untuk memindahkan titik.
- Pilih warna tiap titik dengan pemilih warna, atau ketik kode seperti #rrggbbaa untuk menambahkan transparansi.
- Salin kode CSS-nya dan tempel ke stylesheet Anda. Tombol "Acak" membantu menemukan kombinasi baru.
Pertanyaan umum
Apa beda linear, radial, dan conic?
Gradien linear memadukan warna di sepanjang garis lurus, radial menyebarkannya dari pusat ke luar, dan conic memutarnya searah jarum jam mengelilingi pusat. Conic cocok untuk diagram lingkaran dan roda warna.
Ke arah mana 0deg?
Pada linear-gradient, 0deg berarti dari bawah ke atas dan 90deg dari kiri ke kanan. Gradien conic dimulai dari 0deg, yaitu posisi jam 12.
Apakah gradien berfungsi di browser lama?
Gradien linear dan radial berfungsi di hampir semua browser, sedangkan conic di browser yang rilis sekitar tahun 2020 ke atas. Jika gradien tidak bisa tampil, warna background-color yang dipakai.
Alat serupa
Semua alat
Konversi Satuan
- Konversi Satuan
- Konverter Suhu
- Konverter Berat
- Konverter luas
- Konversi panjang
- Konverter sudut
- Konverter kalori
- Ukuran data
- Volume kering
- Muatan listrik
- Konverter energi
- Konverter debit
- Konverter gaya
- Konsumsi BBM
- Intensitas cahaya
- Gaya gerak magnet
- Konverter Daya
- Konverter Tekanan
- Konverter Dosis Radiasi
- Konverter Kecepatan
- Konverter Waktu
- Konverter Volume