Apa itu Gradien ke CSS?

Pembangun gradien visual yang memungkinkan Anda merancang gradien linear, radial, dan konik dengan beberapa color stop, lalu menyalin kode CSS. Sesuaikan sudut, posisi, dan warna dengan pratinjau langsung.

Bangun gradient linear, radial, atau conic dengan menyeret color stop pada bar langsung dan melihat preview ikut berubah seketika. Tempel gradient CSS yang sudah ada untuk diedit di tempat, pilih preset (Sunset, Aurora, Rainbow), atur sudut, lalu salin sintaks. Outputnya CSS murni — tanpa vendor prefix, tanpa JavaScript runtime.

Cara menggunakan

1. Pilih jenis gradien (linear, radial, atau konik) dan atur arah atau sudutnya.
2. Tambah, hapus, atau sesuaikan color stop dengan mengklik bilah gradien atau menggunakan color picker.
3. Salin kode CSS yang dihasilkan untuk digunakan langsung di stylesheet Anda.

Kapan menggunakan

• Mendesain latar bagian hero dengan kontrol akurat pada posisi stop dan sudut.
• Memperbarui gradient yang sudah ada di stylesheet: tempel, edit visual, salin kembali.
• Membuat gradient conic untuk latar bergaya diagram lingkaran atau loader pelangi.

Hasil

Coba gradien sunset: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — cocok untuk latar belakang bagian hero.

FAQ

Apa beda linear, radial, dan conic gradient?

Linear mengalirkan warna sepanjang sudut lurus. Radial memancar dari titik pusat dalam cincin konsentris. Conic berputar mengelilingi titik pusat seperti diagram pie. Ketiganya pakai sintaks color stop yang sama.

Bagaimana mengimpor gradient yang sudah ada di CSS saya?

Tempel deklarasi utuh ke kolom Import, misal background: linear-gradient(135deg, #ff6b35, #f72585);, lalu klik Import. Editor visual akan terisi dengan sudut, color stop, dan tipe yang terdeteksi.

Mengapa gradient terlihat berpita di beberapa layar?

Banding muncul saat dua stop berjarak jauh di hue bertemu layar 8-bit. Tambahkan stop perantara atau persempit rentang sudut. Browser dengan render HDR memperlihatkan banding jauh lebih sedikit.

Apakah hasilnya bisa dipakai sebagai background-image?

Bisa. String yang disalin berfungsi sebagai nilai background, background-image, atau properti CSS apa pun yang menerima gambar — border-image, mask, hingga fill SVG di browser modern.

Apakah output menambahkan prefix seperti -webkit-?

Tidak. Linear, radial, dan conic gradient sudah jalan tanpa prefix di semua browser evergreen sejak 2017. Menambahkan prefix sekarang hanya memenuhi stylesheet tanpa manfaat.

Alat terkait