Menambahkan Gradient pada Background Image Website dengan CSS

Background pada css dapat menerima beberapa properti lain yang dipisahkan dengan koma, sehingga kita dapat menambahkan sesuatu diatas background yang ada seperti layer yang ada pada photoshop. Berikut ulasan singkatnya.

gambar asli

Pada gambar diatas kita dapat menambahkan gradient didepan gambar tersebut sehingga menjadi seperti dibawah ini tanpa menggunakan image editor melainkan dengan merubah css nya.

hasilnya

berikut adalah scriptnya.
<style>
.tinted-image {
 
  width: 300px;
  height: 200px;
 
  background:
    /* gradient atas biru dan bawah hijau yang transparant */
    linear-gradient(
      rgba(0, 0, 255, 0.45),
      rgba(0, 255, 0, 0.45)
    ),
    /* bottom, image */
    url(images.jpg);
}
</style>

<div class="tinted-image"></div>

Selamat ber-eksperimen dan semoga bermanfaat.