Cara membuat gradien CSS
Gradien CSS memungkinkan Anda membuat transisi warna yang halus tanpa berkas gambar. Mereka lebih ringan daripada gambar, beradaptasi sempurna ke ukuran layar apa pun, dan mudah disesuaikan.
Jenis gradien CSS
Gradien linier — warna berpindah dalam garis lurus (atas ke bawah, kiri-kanan, atau sudut apa pun).
background: linear-gradient(135deg, #667eea, #764ba2);Gradien radial — warna memancar dari titik pusat dalam pola lingkaran atau elips.
background: radial-gradient(circle, #667eea, #764ba2);Gradien konik — warna berputar di sekitar titik pusat, seperti roda warna.
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);Cara membuat gradien secara visual
- Pilih jenis gradien — pilih linier atau radial dan sesuaikan sudut atau posisi.
- Tambahkan titik warna — klik untuk menambahkan warna pada posisi berbeda di gradien. Sesuaikan setiap warna dan posisinya.
- Salin CSS — salin kode yang dihasilkan dan tempel ke stylesheet Anda.
Menggunakan generator visual lebih cepat daripada menulis sintaks dengan tangan, terutama dengan beberapa titik warna.
Pola gradien umum
Latar belakang bagian hero — gradien dua warna yang halus menambahkan kedalaman tanpa mengalihkan perhatian dari teks.
background: linear-gradient(135deg, #0f172a, #1e3a5f);Sorotan tombol — gradien ringan memberi efek tiga dimensi pada tombol.
background: linear-gradient(180deg, #3b82f6, #2563eb);Lapisan pada gambar — lapisan gradien meningkatkan keterbacaan teks pada foto.
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));Batas aksen — gunakan gradien sebagai batas untuk menciptakan minat visual.
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;Tips
- Tetap halus — gradien terbaik hampir tidak terlihat. Pergeseran ringan antara dua warna serupa menambah kedalaman. Gradien pelangi dramatis jarang tampak profesional.
- Gunakan gradien alih-alih gambar — gradien CSS dimuat secara instan tanpa permintaan jaringan. Ganti gambar latar belakang dekoratif dengan gradien jika memungkinkan.
- Uji dalam mode gelap — gradien yang tampak baik pada latar terang dapat memudar atau bentrok dalam mode gelap. Tetapkan gradien yang berbeda untuk setiap tema sesuai kebutuhan.
- Perhatikan kontras teks — jika Anda menempatkan teks pada gradien, verifikasi bahwa teks tetap terbaca di seluruh rentang gradien, bukan hanya di bagian paling terang atau gelap.
Pertanyaan yang sering diajukan
Apakah gradien CSS berfungsi di semua peramban?
Ya. Gradien linier dan radial didukung di semua peramban modern, termasuk Chrome, Firefox, Safari, dan Edge. Gradien konik memiliki dukungan yang sedikit lebih baru tetapi berfungsi di semua versi saat ini.
Bisakah saya menggunakan lebih dari dua warna?
Ya. Gradien CSS menerima sebanyak titik warna yang Anda inginkan. Setiap titik mendefinisikan warna dan posisi sepanjang gradien.
Apakah gradien memengaruhi kinerja?
Tidak. Gradien CSS dirender oleh peramban dan jauh lebih ringan daripada berkas gambar. Mereka beradaptasi sempurna ke ukuran layar apa pun tanpa unduhan tambahan.
Bisakah Anda menganimasikan gradien?
Tidak langsung dengan transisi CSS pada properti background, tetapi Anda dapat menganimasikan background-position atau menggunakan properti kustom CSS dengan @property untuk membuat animasi gradien yang halus.