Cara Membuat Linear Gradient dengan CSS

Bahwa hidup harus menerima, penerimaan yang indah. Bahwa hidup harus dimengerti, pengertian yang benar. Bahwa hidup harus memahami pemahaman yang tulus. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Linear Gradient dengan CSS.

Masih bingung untuk membuat sebuah gradient pada background yang kemudian kita akan membuat gradient nya pada Adobe Photoshop? Jangan khawatir lagi teman-teman karena disini saya akan memberitahukan Cara Membuat Linear Gradient dengan CSS. Berikut caranya.

Seperti biasa, siapkan file index.html nya terlebih dahulu.

Kemudian, isi di bagian <body> tag HTML berikut.

<div id="grad1"></div>

Selanjutnya isi untuk CSS nya.

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Linear Gradient dengan CSS.

Semoga bermanfaat, terima kasih

Cara Membuat Linear Gradient dengan CSS

Kategori