Merubah Warna Gambar menjadi Grayscale dengan CSS

Jika dengan Photoshop kita dapat merubah warna gambar menjadi grayscale dengan cara mengurangi nilai saturationnya. Namun hal ini juga bisa dilakukan dengan CSS. Warna Grayscale atau warna hitam putih pada gambar dapat dihasilkan dengan CSS dengan cara sebagai berikut:

Pertama, pastikan anda sudah menyiapkan file gambar yang akan anda convert warnanya menjadi grayscale. Setelah itu, anda buat 1 file .svg dengan nama "desaturate.svg". File ini bisa anda simpan sejajar dengan file .html. Kontennya adalah sebagai berikut:

Kemudian anda buat file HTML dan CSS nya seperti berikut:

Silahkan lihat hasilnya dibrowser. Gambar tersebut akan menjadi grayscale. Selamat mencoba.