Generator Gradien CSS Online
Buat gradient CSS dengan pratinjau langsung. Tanpa instalasi, gratis.
background: linear-gradient(135deg, #667eea, #764ba2);
Mengapa menggunakannya
Gradient CSS yang sempurna dalam hitungan detik
Pratinjau langsung
Lihat hasilnya saat Anda menyesuaikan warna, sudut, dan posisi.
Kode siap produksi
Sintaks CSS modern. Tanpa vendor prefix yang tidak diperlukan.
Kompatibel dengan browser
Periksa kompatibilitas dan dapatkan kode yang benar untuk target browser Anda.
Tanpa instalasi
Semua tersedia di browser. Tidak perlu Figma, Sketch, atau plugin.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Pilih jenis gradient
Pilih dari linear-gradient, radial-gradient, atau conic-gradient. Setiap jenis memiliki kontrol spesifiknya sendiri.
Konfigurasi warna dan posisi
Tambahkan color stop sebanyak yang Anda butuhkan. Sesuaikan sudut, posisi tengah, dan persentase untuk setiap warna menggunakan kontrol visual.
Salin kode CSS
Kode CSS dihasilkan secara real time. Salin properti background yang lengkap, siap ditempel ke stylesheet Anda.
FAQ
Ada pertanyaan?
Gradient linear (linear-gradient) bertransisi antara warna di sepanjang garis lurus pada sudut yang ditentukan. Gradient radial (radial-gradient) memancar dari titik tengah ke luar dalam bentuk lingkaran atau elips. Gradient conic (conic-gradient) bertransisi di sekitar titik tengah seperti jarum jam, ideal untuk diagram lingkaran atau efek warna berputar dalam CSS murni.
Gunakan rgba() atau kata kunci transparent sebagai color stop. Misalnya: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) menciptakan gradient dari merah solid ke merah yang sepenuhnya transparan. Hindari menggunakan transparent secara langsung dalam gradient di atas latar belakang gelap karena browser menginterpolasi melalui hitam (rgba(0,0,0,0)), menciptakan artefak keabu-abuan yang tidak diinginkan.
Gradient linear dan radial didukung di semua browser modern sejak 2012 (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Gradient conic lebih baru: didukung sejak Chrome 69 (2018), Firefox 83 (2020), dan Safari 12.1 (2019). Untuk proyek yang memerlukan dukungan IE11, gradient CSS tidak memiliki fallback native, gunakan gambar SVG sebagai alternatif.
Tambahkan beberapa color stop: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Kontrol posisi tepat setiap warna menggunakan persentase atau nilai absolut (px, em). Jika Anda tidak menentukan posisi, warna didistribusikan secara merata.
Gradient CSS dihasilkan oleh GPU browser dan tidak memerlukan permintaan jaringan, menjadikannya jauh lebih efisien daripada gambar. Namun, gradient CSS yang sangat kompleks dengan banyak color stop dapat memengaruhi repaint halaman. Untuk gradient yang dianimasikan, performa mungkin menurun pada perangkat mobile kelas bawah. Pertimbangkan menggunakan transform atau opacity sebagai gantinya, yang merupakan properti yang dipercepat GPU dan tidak menyebabkan reflow.
Gradient CSS: sejarah spesifikasi W3C dan teknik lanjutan
Gradient CSS memiliki sejarah standardisasi yang kompleks. Implementasi pertama muncul sebagai ekstensi proprietary: -webkit-gradient() di Safari 4 (2008) dengan sintaks yang sepenuhnya berbeda dari yang modern. Mozilla mengimplementasikan -moz-linear-gradient() di Firefox 3.6 (2010). Sintaks modern yang jauh lebih intuitif diperkenalkan dalam modul CSS Images Level 3 W3C, mencapai status Candidate Recommendation pada tahun 2011 dan dukungan tanpa awalan di Chrome 26 dan Firefox 16 pada tahun 2012. Fungsi conic-gradient() diusulkan oleh Lea Verou pada tahun 2015 dan distandarisasi dalam CSS Images Level 4.
Gradient CSS dirender sepenuhnya pada GPU melalui lapisan compositor browser, tidak seperti gambar yang di-rasterisasi yang memerlukan dekode CPU terlebih dahulu. Ini menjadikannya sangat efisien untuk latar belakang area besar. Secara internal, mesin rendering (Skia di Chrome/Edge, WebRender di Firefox) menghitung interpolasi warna dalam ruang warna sRGB secara default. CSS Color Level 4 memperkenalkan interpolasi dalam ruang warna lain (oklch, display-p3), memungkinkan gradient yang lebih seragam secara perseptual tanpa banding warna yang tidak diinginkan.
Teknik lanjutan adalah gradient halftone, yang menggunakan beberapa lapisan background untuk membuat pola titik. Teknik lain adalah menggunakan gradient sebagai mask CSS dengan mask-image: linear-gradient(), memungkinkan fade-out elemen tanpa JavaScript. Untuk efek teks bergradien, background-clip: text dikombinasikan dengan color: transparent, teknik yang dipopulerkan dalam desain UI modern sejak 2015 dan banyak digunakan dalam antarmuka Apple, Google, dan Meta. Gradient juga merupakan fondasi neumorfisme dan glassmorfisme, tren desain dominan dari 2019 hingga 2023.