Pembuat Gradien CSS

Rancang gradien CSS linier, radial, dan kerucut secara visual. Tambahkan penghentian warna, sesuaikan posisi, dan salin kode CSS yang siap digunakan.

Hasil instan Berjalan di browser
Pembuat Gradien CSS
135°

Preset

Tip Gradien CSS

Gradien berfungsi pada properti CSS apa pun yang menerima gambar: background, background-image, border-image, mask, dan banyak lagi. Gunakan gradien yang dipisahkan koma untuk melapisinya: latar belakang: linear-gradient(...), linear-gradient(...);

Cara menggunakan?

  1. 1
    Pilih Jenis GradienPilih Linear, Radial, atau Kerucut. Sesuaikan sudut untuk gradien linier atau kerucut.
  2. 2
    Atur Penghentian WarnaPilih warna dan posisi untuk setiap perhentian. Tambahkan lebih banyak perhentian untuk gradien kompleks.
  3. 3
    Salin CSSnyaKlik Salin CSS untuk mendapatkan kode yang siap ditempel, atau salin nilai latar belakangnya saja.

Pertanyaan umum

Apa itu gradien CSS?
Gradien CSS adalah transisi mulus antara dua warna atau lebih yang dihasilkan murni oleh browser — tidak diperlukan file gambar. Gradien linier berbentuk garis lurus, gradien radial memancar dari suatu titik pusat, dan gradien berbentuk kerucut menyapu sekeliling pusat seperti roda warna.
Berapa banyak perhentian warna yang dapat saya tambahkan?
Alat ini mendukung hingga 8 penghentian warna. CSS sendiri tidak memiliki batasan resmi, namun browser menangani lusinan pemberhentian tanpa masalah.
Apakah CSS yang dihasilkan kompatibel dengan semua browser?
Ya. Outputnya menggunakan sintaks standar tanpa awalan yang didukung oleh semua browser modern (Chrome, Firefox, Safari, Edge). Internet Explorer 9 adalah satu-satunya browser utama yang memerlukan awalan -ms- yang lebih lama, yang dihilangkan oleh alat ini.

Apa itu Gradien CSS?

Gradien CSS adalah transisi warna mulus yang ditentukan dalam kode, dan tidak memerlukan file gambar. Gradien dirender secara asli oleh browser pada resolusi apa pun, menjadikannya sempurna untuk latar belakang, tombol, batas, dan overlay.

Linear vs Radial vs Conic

Gradien linier mengalir dalam garis lurus pada sudut tertentu. Gradien radial memancar keluar dari titik pusat dalam elips atau lingkaran. Gradien berbentuk kerucut menyapu sekitar titik tengah seperti roda warna — cocok untuk diagram lingkaran dan efek dial.

Color Stop

Color stop menentukan awal dan akhir setiap warna di sepanjang gradien. Anda dapat menempatkannya di posisi mana pun (0%–100%). Tanpa posisi eksplisit, browser akan mendistribusikannya secara merata.

Kinerja

Gradien CSS dipercepat dengan GPU di semua browser modern. Gambar tersebut jauh lebih cepat untuk dirender dibandingkan gambar raster yang setara dan dapat diskalakan dengan sempurna pada resolusi layar atau tingkat zoom apa pun.

Pemeriksaan praktis hasil

Generator gradien sebaiknya dipakai sebagai generator kerja: atur parameter, lihat pratinjau, lalu salin hanya hasil yang sesuai dengan kebutuhan. Alat ini mencakup linear, radial, conic, sudut, dan titik warna; membantu menilai kontras sebelum CSS disalin. Untuk kode, warna, hash, identitas unik, kata sandi, JSON, QR, atau kode batang, catat juga pengaturan yang menghasilkan output tersebut. Catatan kecil ini memudahkan pengulangan proses, audit desain, atau penjelasan kepada anggota tim lain.

Sebagian besar proses berjalan di browser setelah halaman dimuat, sehingga penggunaan sehari-hari cepat dan tidak memerlukan akun. Meski begitu, jangan menempelkan rahasia produksi, kata sandi nyata, kunci API, token, atau data pribadi jika Anda tidak yakin bagaimana hasilnya akan disimpan setelah disalin. Sebelum dipakai di produksi, uji output di tempat tujuan: CSS di komponen asli, JSON di parser aplikasi, QR atau barcode dengan pemindai, dan kata sandi di pengelola kata sandi. Pemeriksaan ini membantu menemukan masalah spasi, karakter khusus, panjang maksimum, kontras, dan kompatibilitas pustaka sebelum hasil digunakan secara publik.

Setelah hasil dibuat, lakukan uji kecil di lingkungan tujuan sebelum menganggapnya siap. Warna perlu dilihat di latar sebenarnya, gradient harus diuji bersama teks, JSON perlu dibaca parser aplikasi, hash harus dibandingkan dengan input yang tepat, sedangkan QR dan barcode sebaiknya dipindai. Untuk kata sandi dan identifier, pastikan panjang, karakter khusus, dan aturan sistem tujuan cocok. Jika output berubah saat disalin, perbaiki formatnya lebih dulu agar tidak menjadi masalah saat dipakai tim atau pengguna.

Gunakan hasil generator sebagai bahan awal yang tetap perlu ditinjau. Dalam desain, periksa kontras dan konsistensi merek; dalam pengembangan, pastikan format cocok dengan framework, validator, dan batas panjang; dalam keamanan, bedakan data contoh dari data produksi. Jika hasil akan dibagikan, hilangkan informasi sensitif dan simpan hanya output yang memang diperlukan. Langkah ini membuat proses cepat tetap terkendali tanpa mengorbankan kualitas akhir.

Komentar