Membuat Warna Background Gradien Menggunakan CSS

Bagi yang sering otak atik foto menggunakan photoshop pasti sudah tidak asing lagi dengan istilah gradien (bahasa ingris:gradient). Warna gradien biasanya dihasilkan dari sebuah perpaduan 2 warna atau lebih dengan intensitas warna yang satu dengan warna yang dikombinasikan seperti menyatu, namun tetap terlihat ada perbedaaan warna. Dalam dunia editing photo umumnya efek gradient ini terbagi menjadi lima bagian diantaranya: Linear gradient, Radial gradient, Angle gradient dan Diamond Gradient

Menggunakan warna gradient mungkin bisa memberikan kesan yang berbeda yang membuat desain website jadi terlihat lebih menarik. Untuk Membuat Warna Background Gradien Menggunakan CSS Anda bisa melihat contoh dibawah ini :

Contoh :
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);

Membuat Warna Gradient dari Kiri bawah
background:linear-gradient(to bottom left, #5b86e5, #36d1dc);

Membuat Warna Gradient dari kanan
backgorund: linear-gradient(to right, #5b86e5, #36d1dc);

Untuk contoh – contoh lain seperti penggunaan radial gradient, angle dan diamond gradient, bisa lihat dokumentasinya di : https://www.w3schools.com/css/css3_gradients.asp

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple