Pernahkah kamu melihat background website yang warnanya berubah-ubah dengan smooth, sehingga menciptakan efek visual yang memesona? Atau mungkin kamu pernah melihat tombol yang berubah warna saat kursor ditempatkan di sana?

Semua teknik itu dibuat menggunakan CSS gradient.

CSS gradient tampil memberikan sentuhan untuk menggabungkan warna dengan cara yang smooth dan artistik, menjadi salah satu alat paling penting bagi web developer. Mari kita selami lebih dalam tentang CSS gradient dan temukan bagaimana kamu bisa memanfaatkan teknik ini untuk mengubah tampilan website-mu!

Jenis-jenis CSS Gradient

Ada dua jenis utama CSS gradient yang bisa kamu gunakan, yaitu linear gradient dan radial gradient.

#1 Linear gradient

Seperti namanya, linear gradient menciptakan peralihan warna sepanjang garis lurus. Kamu bisa menentukan arah peralihan, mulai dari atas ke bawah, kiri ke kanan, atau diagonal. Linear gradient cocok untuk membuat background yang dinamis atau menekankan elemen tertentu pada halaman web.

#2 Radial gradient

Radial gradient membuat peralihan warna yang berpusat pada satu titik dan memancar keluar secara melingkar. Gradient ini memberikan efek seperti lingkaran cahaya dan efektif untuk menciptakan elemen visual untuk tombol atau ikon.

Perbedaan dan waktu penggunaannya

Perbedaan utama antara linear gradient dan radial gradient adalah cara keduanya menyebarkan warna. Linear gradient bekerja sepanjang garis lurus, sedangkan radial gradient memancar dari titik pusat.

Pemilihan antara keduanya tergantung pada efek visual yang ingin kamu capai. Jika kamu mencari peralihan warna yang sederhana dan lurus, linear gradient adalah pilihan tepat. Namun, jika kamu ingin membuat efek lebih dramatis dan dinamis, radial gradient bisa menjadi opsi.

Cara Membuat Membuat Linear Gradient dengan CSS

Berikut cara yang bisa kamu ikuti untuk membuat linear gradient:

• Pilih elemen HTML: pertama, tentukan elemen HTML yang ingin kamu beri efek linear gradient. Elemen ini bisa berupa div, header, button, atau lainnya.
• Gunakan properti background-image: untuk menerapkan linear gradient, kamu perlu menggunakan properti CSS background-image. Properti ini memungkinkan kamu menetapkan gambar atau gradient sebagai latar belakang elemen.
• Tentukan fungsi linear-gradient(): dalam properti background-image, gunakan fungsi linear-gradient(). Fungsi ini akan menentukan arah gradient dan warna yang akan digunakan.

Contohnya, kamu akan membuat gradient yang berjalan dari kiri ke kanan, dimulai dari warna merah hingga kuning.

Namun, perlu diingat bahwa selain warna default CSS, gradient juga menerima format warna lain seperti kode HEX dan RGBA. Kamu bisa menggunakan format seperti #FF0000 untuk merah atau rgba(255,0,0,0.5) untuk merah dengan setengah transparansi.

• Tentukan arah gradient: dalam fungsi linear-gradient(), kamu bisa menentukan arah gradient menggunakan kata kunci seperti to right, to left, to top, to bottom, atau menggunakan derajat, misalnya 45deg.
• Tentukan warna: setelah menentukan arah, pilih warna yang ingin kamu gunakan. Kamu bisa menggunakan lebih dari dua warna dan menentukan posisi masing-masing warna jika diinginkan.

Misalnya, gradient akan berjalan dari atas ke bawah, dimulai dari biru, putih di tengah-tengah (50%), dan hijau di bagian bawah.

Cara Membuat Radial Gradient dengan CSS

Berikut cara membuat radial gradient:

• Pilih elemen HTML: pertama, tentukan elemen HTML yang ingin kamu beri efek radial gradient, seperti div, section, atau button.
• Gunakan properti background-image: sama seperti linear gradient, kamu akan menggunakan properti background-image untuk menerapkan radial gradient pada elemen.
• Tentukan fungsi radial-gradient(): dalam properti background-image, gunakan fungsi radial-gradient(). Fungsi ini digunakan untuk menentukan bentuk, ukuran, dan warna gradient.

Contohnya, gradient akan memiliki bentuk lingkaran dengan warna merah di tengah yang memudar menjadi kuning di tepi.

• Tentukan bentuk dan ukuran: Kamu bisa menentukan bentuk gradient dengan kata kunci circle atau ellipse. Untuk ukuran, gunakan kata kunci seperti closest-side, farthest-corner, atau menggunakan nilai spesifik.
• Tentukan warna: Tentukan warna yang akan digunakan dalam gradient. Kamu dapat menambahkan sebanyak mungkin warna yang diinginkan dan menentukan posisi masing-masing warna.

Contohnya, gradient berbentuk elips dengan biru di tengah, putih di 50%, dan hijau di bagian luar.

Cara Membuat Gradient Overlay dan Efek Hover

Gradient overlay adalah teknik di mana gradient diterapkan sebagai lapisan tambahan di atas elemen, seperti gambar atau teks. Tujuannya yaitu memberikan kedalaman, nuansa, atau efek visual tertentu pada elemen tersebut.

Misalnya, gradient linear dengan transparansi 0.5 digunakan sebagai overlay pada gambar, memberikan efek gelap di gambar tersebut:

Di sisi lain, efek hover terjadi saat kursor berada di atas elemen tertentu, seperti tombol atau tautan, lalu elemen tersebut merespons dengan perubahan visual.

Contohnya, warna gradient akan berubah dari merah-kuning menjadi biru-hijau saat elemen di-hover.

FAQ (Frequently Asked Question)

Apakah CSS gradient hanya bisa diaplikasikan pada background?

Pada dasarnya, CSS gradient bisa diaplikasikan di elemen lain selain background, seperti teks dan border. Dengan menggunakan properti seperti background-clip dan text-fill-color, kamu bisa menerapkan gradient pada teks.

Bagaimana cara membuat gradient yang berulang?

Kamu bisa menggunakan fungsi repeating-linear-gradient() atau repeating-radial-gradient() untuk membuat gradient yang berulang secara otomatis.

Apakah CSS gradient dapat digunakan di semua browser?

CSS gradient umumnya didukung oleh semua browser modern, namun untuk browser lama seperti Internet Explorer 9 ke bawah, kamu mungkin perlu menggunakan prefix vendor atau teknik fallback lainnya.

Selain itu versi terdahulu seperti Firefox 35 hanya memiliki partial support terhadap gradient.

Penutup

CSS gradient adalah cara untuk menampilkan peralihan warna yang smooth dari satu warna ke warna lain. Teknik ini dapat digunakan untuk background, teks, border, dan berbagai elemen lainnya untuk menciptakan efek visual yang menarik. Ada dua jenis utama gradient, yaitu linear gradient dan radial gradient.

Baik digunakan sebagai overlay, efek hover, atau background dinamis, gradient bisa memberikan dimensi tambahan dan memperkaya pengalaman pengguna.