Ada masalah dengan alat ini?
Tentang «Generator Gradien CSS Online»
Alat ini membangun gradien CSS linear, radial, dan konik secara visual. Tambahkan stop warna, pilih arah atau sudut, atur transparansi, dan alat menghasilkan kode CSS yang cocok siap ditempel ke stylesheet Anda.
Gradien ada di mana-mana dalam desain web modern: latar belakang hero, status tombol, aksen kartu, dan teks gradien. Membuat sintaks gradien CSS secara manual rumit — pengeditan visual memungkinkan Anda bereksperimen dengan transisi halus tanpa pengeditan coba-coba.
Output mendukung fitur modern seperti beberapa stop warna, penempatan persentase, interpolasi rona dalam ruang warna berbeda, dan gradien konik untuk efek melingkar. Salin sebagai CSS atau sebagai kelas utilitas Tailwind.
Cara memakai alat ini
Cara merangkai deklarasi CSS linear-gradient dengan dua stop
Pilih stop
"Color 1" dan "Color 2" menerima warna CSS apa pun: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba dengan alpha, atau nama (`navy`). Stop pertama di 0%, kedua di 100%.
Atur sudut
"Angle (deg)" mengatur arah gradien dalam derajat. `0` bawah→atas, `90` kiri→kanan, `180` atas→bawah (default CSS), `45` diagonal klasik.
Tekan Jalankan
Hasil: satu field `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. Tempel langsung sebagai nilai `background:` atau `background-image:`.
Lebih dari dua stop
Untuk radial, conic, atau 3+ stop, edit hasilnya manual — sintaks `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Atau pakai editor gradien yang lebih lengkap; alat ini sengaja minimal untuk linear dua-stop.