Generator Gradien CSS (linear, radial, konik)
Pilih jenis gradien, atur sudut, tambah atau hapus color stop dengan posisinya. Pratinjau langsung. Salin deklarasi CSS background dengan satu klik.
Color stop
- 0%
- 100%
Cara kerjanya
Tiga jenis gradien dalam CSS
Gradien linear: warna bertransisi sepanjang garis lurus pada sudut tertentu. 0° mengarah ke atas, 90° mengarah ke kanan (arah membaca default), 180° mengarah ke bawah. Paling umum untuk latar belakang, tombol, bagian hero.
Gradien radial: warna bertransisi keluar dari titik pusat. Bentuknya bisa lingkaran (default kami) atau elips. Terbaik untuk efek sorotan, elemen seperti matahari, atau titik perhatian.
Gradien konik: warna berputar di sekitar titik pusat, seperti roda warna. Kurang umum tetapi kuat untuk diagram lingkaran, tampilan jam, atau spinner dekoratif. Didukung di browser modern sejak 2020.
Color stop dan sistem persentase
Setiap color stop memiliki warna dan posisi dari 0% hingga 100%. 0% adalah awal gradien, 100% adalah akhir. Dua stop memberikan gradien dua warna yang halus. Menambahkan stop ketiga di tengah menciptakan perpaduan tiga warna atau pita tajam tergantung posisi.
Untuk transisi tajam (tanpa perpaduan), tempatkan dua stop pada posisi yang sama dengan warna berbeda. Misalnya, '#000 50%, #fff 50%' menciptakan pemisahan hitam-putih tajam di titik tengah. Begitulah cara latar belakang 'bergaris' dibuat.
Tips performa dan aksesibilitas
Gradien dirender secara native tanpa permintaan HTTP, tidak seperti gambar latar belakang. Skala tanpa batas tanpa kehilangan kualitas. Ramah animasi: transisikan posisi via background-position atau animasikan color stop dengan custom properties.
Aksesibilitas: jangan tempatkan teks langsung di atas gradien kompleks jika kontras bervariasi di seluruh gradien. Gunakan overlay warna datar, pastikan kecerahan rata-rata gradien kontras dengan teks, atau uji dengan pemeriksa kontras kami. WCAG AA memerlukan 4,5:1 untuk teks normal, 3:1 untuk teks besar.
Pertanyaan umum
›Apakah gradien didukung di browser lama?
Gradien linear dan radial berfungsi di semua browser modern termasuk Edge, Firefox, Chrome, Safari (sejak 2014). Gradien konik memerlukan Chrome 69+, Firefox 83+, Safari 12.1+ — untuk browser lama, gunakan linear sebagai fallback.
›Bisakah saya menggunakannya di React Native atau aplikasi mobile?
Gradien CSS web tidak langsung berlaku di React Native — gunakan library seperti `react-native-linear-gradient`. Color stop dapat ditransfer, tetapi sintaksnya berbeda. UI iOS dan Android menggunakan API khusus platform.
›Bisakah saya menggunakan nama warna?
Ya. Ganti kode hex (misalnya #ff0000) dengan nama warna CSS (red, dodgerblue, dll.) di input teks di sebelah color picker.
›Mengapa gradien konik saya terlihat aneh?
Gradien konik berputar searah jarum jam dari sudut yang Anda atur. Terlihat paling baik dengan beberapa stop yang mencakup rotasi penuh 360°. Dengan hanya 2 stop, seringkali terlihat tidak lengkap.
›Bagaimana cara membuat efek 'glow'?
Gunakan gradien radial dengan stop akhir sepenuhnya transparan: misalnya, 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.
›Bisakah saya menganimasikan gradien?
CSS tidak menganimasikan color stop secara langsung, tetapi Anda dapat menganimasikan background-position untuk efek bergerak, atau menggunakan CSS custom properties (variabel) dan memperbaruinya dengan JavaScript.
›Mengapa CSS-nya sangat panjang?
Setiap stop menambahkan warna dan posisi. Gradien panjang dengan banyak stop menghasilkan CSS yang panjang. Untuk hasil lebih sederhana, gunakan 2-3 stop saja.
›Apakah data meninggalkan browser saya?
Tidak. Semuanya dihitung secara lokal; tidak ada yang dikirim ke server.
Alat terkait
Terakhir diperbarui: