Halo teman – teman selamat datang kembali di tips dan trik Dumet School, pada kesempatan kali ini saya akan memberikan tips tentang Cara Menggunakan Gradients Pada CSS yang mana dalam penggunaan background pada css bukan hanya color atau image. Namun kita juga dapat membuat background dengan warna gradasi yaitu dengan menggunakan fungsi background-image

Untuk penggunaaknya kita hanya perlu menyiapkan kode warna yang ingin teman – teman gunakan

linear-gradient(direction, color-1, color-2)

Yang perlu teman – teman ingat pada parameter pertama atau direction merupakan untuk mengatur mau ke arah mana warna gradasi yang ingin di buat, dan di parameter selanjutnya melainkan option warna

background-image: linear-gradient(gray, black)

Kerika kita mengisinya dengan hanya 2 option warna tanpa direction maka warna akan tercetak gray dari atas sampai bawah berwarna hitam atau secara default option warna pertama akan berada diatas dan option warna ke dua akan berada di bawah

Jika kita memberikan directionnya seperti script di bawah ini

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

Maka warna option ke dua akan di balik menjadi tampil paling atas dan yang pertama akan tampil di posisi bawah.

Kita akan coba membarikan banyak warna dar arah gradasi akan kita ubah menjadi top right

background-image: linear-gradient(to top right,gray, black,yellow,red);

Maka hasilnya seperti gambar di bawah ini

Bagaimana, sangat mudah bukan..??

Baiklah teman – teman, demikianlah artikel tentang Cara Menggunakan Gradients Pada CSS. Tentu cara ini untuk menghindari background menggunakan file image, biasanya ketika seorang web design belum bisa membuat background gradasi salah satu alternative nya adalah menggunakan gambar yang sudah di buat gradasi. Sehingga ketika website terlalu banyak image maka website akan membuat peforma website kita kurang cepat. Nah cara membuat gradasi dengan css ini sebagai rujukan untuk membuat website lebih cantik dan peforma website lebih baik.

Tentu kita akan jumpa kembali pada artikel yang akan datangm terima kasih dan sampai jumpa. #dirumahaja