Warna & Desain
Generator Gradient CSS
Generator Gradient CSS adalah alat gratis yang menghasilkan kode gradient CSS secara otomatis hanya dengan mengatur warna, arah, dan gradasi (color stop) melalui GUI. Alat ini mendukung tiga jenis gradien, yaitu linear, radial, dan conic, sehingga Anda dapat langsung membuat gradient untuk latar belakang situs web, tombol, hingga judul sambil melihat pratinjau secara real-time.
Color stop (titik perubahan warna)
Jenis gradient
Pratinjau
Kode CSS
.gradient {
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}
Pembuatan gradient sepenuhnya dilakukan di dalam browser yang Anda gunakan, dan apa yang Anda masukkan tidak dikirim ke server eksternal.
Alat Terkait
Color Picker
Ambil warna dari gambar dan dapatkan kode HEX, RGB, atau HSL. Perbesar dengan loupe untuk akurasi per piksel dan ekspor palet. Gratis, tanpa daftar.
Konverter Kode Warna
Konversi kode warna antara HEX, RGB, HSL, HSV, OKLCH, beserta alpha dan referensi CMYK. Salin format apa pun sekali klik. Berjalan sepenuhnya di browser Anda.
Pemeriksa Kontras
Cek rasio kontras warna terhadap WCAG 2.1/2.2 AA dan AAA, dengan saran warna lulus, simulasi buta warna, dan APCA. Berjalan sepenuhnya di browser Anda.
Pembuat Palet Warna
Generator skema warna gratis yang membuat palet warna otomatis berdasarkan teori warna (komplementer, analog, triadik, dan lainnya) hanya dari satu warna dasar. Ekspor ke CSS variable, Tailwind, SCSS, dan JSON, lengkap dengan acuan kontras. Berjalan sepenuhnya di browser Anda.
Apa itu alat Generator Gradient CSS?
Generator Gradient CSS adalah alat gratis yang menghasilkan kode gradient CSS secara otomatis hanya dengan mengatur warna, arah, dan gradasi (color stop) melalui GUI. Alat ini mendukung tiga jenis gradien, yaitu linear, radial, dan conic, sehingga Anda dapat langsung membuat gradient untuk latar belakang situs web, tombol, hingga judul sambil melihat pratinjau secara real-time.
Setelah memilih jenisnya, pada linear dan conic Anda dapat mengatur sudut dengan slider, sedangkan pada radial Anda dapat menentukan bentuk (lingkaran atau elips) dan posisi pusatnya. Warna dapat ditambah atau dihapus dengan bebas sebagai color stop, dan Anda dapat menyeret handle pada bar untuk mengubah posisinya, atau memilih warna lewat color picker maupun input HEX. Setiap stop juga dapat diberi transparansi (alpha), sehingga Anda bisa membuat gradient transparan menggunakan rgba(). Tekan tombol "Buat Acak" untuk langsung mencoba ide kombinasi warna.
Gradient yang dibuat dapat disalin dengan satu klik dalam berbagai format, yaitu CSS (background-image), CSS variable (:root { --gradient }), backgroundImage milik Tailwind, dan variabel SCSS, lalu langsung ditempel ke implementasi. Selain itu, dengan menekan "Salin URL" Anda akan memperoleh URL berbagi yang dapat mereproduksi gradient saat ini, sehingga praktis untuk berbagi dengan tim maupun menyimpannya sebagai bookmark.
Seluruh pembuatan gradient dilakukan di dalam browser yang Anda gunakan, dan apa yang Anda masukkan tidak dikirim ke server eksternal. Dapat langsung dipakai tanpa pendaftaran akun maupun klik iklan.
Cara penggunaan
- Klik pada bar color stop untuk menambah warna, lalu seret handle untuk mengubah posisinya. Pilih warna lewat color picker atau HEX, dan atur transparansi (alpha) dengan slider. Gunakan "Buat Acak" untuk langsung mencoba ide kombinasi warna.
- Pilih jenis gradient (linear, radial, atau conic). Pada linear dan conic, atur sudut dengan slider; pada radial, atur bentuk (lingkaran atau elips) dan posisi pusatnya.
- Periksa hasil akhir gradient secara real-time pada pratinjau. Tekan "Salin URL" untuk memperoleh URL berbagi yang dapat mereproduksi pengaturan saat ini.
- Pada "Kode CSS", beralihlah antartab CSS, CSS variable, Tailwind, dan SCSS, lalu ambil kodenya dengan tombol "Salin kode CSS" untuk ditempel ke implementasi.
Skenario penggunaan
- Desainer / coder yang ingin memakai gradient pada latar belakang situs web atau tombol dapat menyiapkan CSS dengan cepat untuk langsung ditempel.
- Front-end engineer yang ingin menentukan arah desain sambil mencoba berbagai gradient seperti linear, radial, dan conic.
- Developer yang ingin menuangkan gradient langsung ke dalam kode sebagai CSS variable atau pengaturan Tailwind.
- Pengguna yang ingin membuat overlay di atas gambar atau efek bergaya kaca dengan gradient yang memiliki transparansi.
- Pengguna yang ingin meneruskan gradient yang sudah ditentukan kepada tim lewat URL berbagi, atau mereproduksi pengaturan yang sama di kemudian hari.
Hal yang perlu diperhatikan
- Seluruh pembuatan gradient dilakukan di dalam browser, dan apa yang Anda masukkan tidak dikirim keluar.
- Gradient conic (`conic-gradient`) mungkin tidak tampil pada sebagian browser lama. Silakan periksa dukungan pada lingkungan yang Anda gunakan.
- Color stop dapat ditambahkan hingga maksimal 8 buah. Saat transparansi 100%, output berupa `#RRGGBB`; saat di bawah 100%, output berupa `rgba()`.
- URL berbagi memuat jenis, sudut, bentuk, posisi pusat, dan setiap color stop (warna, transparansi, posisi). Membuka URL tersebut akan mereproduksi gradient dengan pengaturan yang sama.