Generator Gradien CSS (linear, radial, konik)

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.