Gradient Generator
Gradient Generator — berjalan di browser. Input tidak disimpan.
Pembuat gradien
Masukkan nilai, lalu tekan Hitung.
Pratinjau
Menghasilkan CSS linear-gradient secara real time. Diperlukan minimal dua warna.
Cara menggunakan
- Pilih jenis (linear atau radial), arah, dan minimal dua warna.
- Gunakan Tambah warna / Hapus warna untuk mengubah jumlah stop. Wajib dua warna atau lebih.
- Periksa pratinjau langsung, lalu salin CSS
backgrounddengan Salin. - Reset mengembalikan gradien linear dua warna bawaan.
Konsep utama
Gradien CSS adalah gambar latar, bukan background-color solid. Gradien linear mengikuti sudut atau kata kunci seperti to right; radial menyebar dari pusat. Setiap stop tambahan menambah warna di sepanjang jalur itu. Generator mengeluarkan satu deklarasi background yang bisa ditempel ke stylesheet. Tidak menghasilkan aturan hover, animasi, atau awalan vendor.
Stop keras (dua warna di persentase yang sama) tampak seperti garis. Campuran lembut memakai persentase berbeda. Hex dan RGB dari pemilih sama-sama berfungsi. Pembuatan hanya di peramban. Untuk transparansi, ubah CSS yang disalin menjadi rgba/hsla—pemilih biasanya hex pekat.
Contoh
Gradien linear dari #4f46e5 ke #06b6d4 ke kanan bawah adalah latar hero yang umum. Tambah stop tengah di 50% untuk campuran tiga warna. Salin nilai setelah background: dan pakai apa adanya. Bagian hero sering terlihat bagus sekitar 135deg di atas overlay foto. Untuk tombol, 180deg (sedikit lebih terang di atas) pola yang umum. Saat mencoba input yang sama, reset dulu agar keluaran lama tidak tercampur. Di komputer bersama, kosongkan kolom setelah selesai. Menutup tab membuang yang ditempel; Anda tidak perlu mengirim permintaan hapus ke server. Nama tombol sama dengan alat di atas halaman. Jika hasil kosong, periksa kolom wajib dan error yang tersembunyi.
Terkait: Generator box shadow · Pemilih warna
Pertanyaan umum
Bisakah saya membuat gradien berulang atau kerucut?
Versi ini mengeluarkan CSS linear dan radial. Sintaks repeating dan conic tidak disertakan.
Berapa banyak warna yang bisa ditambah?
Gunakan Tambah warna untuk menambah stop. Minimal dua warna wajib.
Apakah Salin menyertakan nama properti?
Menyalin deklarasi lengkap <code>background: ...;</code>. Jika hanya butuh fungsinya, hapus nama properti setelah menempel.
Apakah awalan vendor ditambahkan?
Tidak. Peramban modern memahami <code>linear-gradient</code> / <code>radial-gradient</code> standar.
Apakah CSS disimpan di server?
Tidak. Hanya dibuat di peramban.
Bisakah memakai warna transparan?
Hex dari pemilih biasanya pekat. Untuk alfa, tempel rgba/hsla ke stylesheet setelah menyalin.
Terakhir ditinjau: 2026-09-04