CSS Gradient Generator
Bikin gradient buat background website secara visual, langsung copy kode CSS-nya.
Apa itu CSS Gradient Generator?
CSS Gradient Generator adalah alat untuk merancang gradasi warna secara visual lalu mendapatkan kode CSS-nya. Kamu bisa memilih tipe linear atau radial, mengatur sudut, dan menambahkan sebanyak mungkin titik warna — preview besar menunjukkan hasilnya secara langsung sehingga tidak perlu tebak-tebakan menulis sintaks linear-gradient() secara manual.
Cara pakai
Pilih tipe Linear atau Radial. Untuk linear, atur sudut lewat slider. Klik kotak warna untuk menggantinya, dan gunakan + Tambah Warna bila ingin gradasi lebih dari dua tahap. Setelah preview terlihat pas, klik Salin Kode CSS lalu tempel sebagai nilai properti background di stylesheet kamu.
Pertanyaan Umum (FAQ)
Linear mengalirkan warna dalam satu garis lurus mengikuti sudut yang kamu tentukan. Radial memancarkan warna dari satu titik pusat ke luar, sehingga cocok untuk efek sorot cahaya atau latar yang terfokus.
0deg berarti gradasi mengalir dari bawah ke atas, dan sudutnya bertambah searah jarum jam — 90deg mengalir dari kiri ke kanan, 180deg dari atas ke bawah.
Ya. Sintaks linear-gradient() dan radial-gradient() tanpa prefiks sudah didukung penuh di semua browser modern, termasuk versi ponsel.
Itu terjadi ketika dua warna berseberangan pada roda warna dicampur, sehingga bagian tengahnya melewati abu-abu. Pilih warna yang berdekatan coraknya, atau tambahkan satu titik warna perantara yang lebih pekat.
Bisa. Terapkan gradasi sebagai background pada elemen teks, lalu tambahkan background-clip: text dan color: transparent.