Cara menambahkan efek warna gradasi pada background HTML

Menambahkan efek gradasi pada background - akan menambah kesan hidup pada sebuah objek yang di tampilkan, bisa juga sebagai efek 3D karena objek seperti memantulkan sebuah bayangan atau bahkan cahaya, sebagai contoh pada tombol berikut

TOMBOL 1

TOMBOL 2

Kedua tombol di atas menggunakan background warna hijau, namun perbedaannya ialah tombol 1 tidak menggunakan efek gradasi sedangkan tombol kedua menggunakan efek gradasi jadi terlihat seperti tersorot cahaya. Tombol di atas menggunakan efek gradasi seperti berikut

<div style="text-align: center;">
<span style="background: linear-gradient(to right , #006400 , #5eee66); border-radius: 1em; border: 3px inset white; color: white; font-size: large; padding: 5px 10px 5px 10px; text-shadow: 2px 2px 3px black;"><b>TOMBOL 2</b></span></div>

👈 hijau tua / hijau muda 👉

Pada skrip di atas, teks berwarna merah adalah kode skrip warna gradasi pada background, dan untuk warna yang saya gunakan adalah dua warna yaitu warna hijau tua dan hijau muda.

Atau kita gunakan contoh warna lain seperti berikut.

background: linear-gradient(to right , black , blue);

👈 Hitam / Biru 👉

Skrip di atas mengarahkan warna biru dari kanan ke kiri, sedangkan untuk efek gradasi mengarah kearah lainnya kamu bisa ubah right menjadi left, top atau bottom, seperti contoh efek gradasi mengarah ke atas seperti berikut.

background: linear-gradient(to top , black , blue);

👇 Hitam / Biru 👆

Dan jika ingin menambahkan banyak warna , kamu bisa menambahkan warna lain dengan menempatkannya setelah kode warna sebelumnya dengan menambahkan koma seperti berikut.

background: linear-gradient(to right, red, green, blue, white);

Merah / Hijau / Biru / Putih

Untuk efek gradasi yang bercampur atau berpusat pada satu sisi kamu bisa menambahkan kode seperti berikut.

background: radial-gradient(circle, white, blue);

Warna putih berpusat di tengah

background: radial-gradient(circle at top left , white , blue);

Warna putih berpusat di kiri atas

Dari beberapa skrip diatas sebenarnya dasarnya sama kita hanya mengubah antara LINEAR - RADIAL - TOP - LEFT - RIGHT - BOTTOM dan tentunya warna yang akan kita gunakan.

Demikian artikel saya kali ini, semoga postingan ini dapat dipahami dengan baik dan bisa memberikan manfaat bagi semua. Untuk mengetahui informasi lebih lengkap mengenai artikel diatas kamu bisa kunjungi link sumbernya yaitu webdesign.tutsplus.com