Tutorial CSS: Cara Membuat Background Gradien

Home Coding HTML-CSS

Background gradien adalah penggabungan dua atau lebih warna dalam sebuh objek dimana bertransisi secara halus satu sama lain.

Salah satu jenis gradien yang bisa dilakukan pada css adalah linear-gradient. Linier-gradient dapat dituliskan dengan beberapa cara. Berikut cara-cara tersebut

Warna

Linier-gradient harus memiliki minimal 2 parameter. Kedua parameter tersebut terdiri dari dua warna yang akan digabungkan.

  .contoh1 {
    background: linear-gradient(red, white);
  }

Pada contoh diatas, elemen dengan class "contoh1" diberi background Linier-gradient dimana warna yang digabungkan adalah warna merah dan putih. Berikut hasilnya:

background: linear-gradient(red, white);

Jika linear-gradient tidak diatur sudut arahnya, maka sudut arah yang diterapkan otomatis diatur ke arah bawah seperti pada gambar diatas.

Perlu diperhatikan, jika background anda tidak terlihat bisa jadi karena elemen anda tidak berisi apapun sehingga tidak ada yang harus ditampilkan. Jika elemen anda tidak berisi apapun dan anda ingin menampilkan background-nya, anda bisa mengatur ukuran elemen tersebut untuk menampilkannya (misalnya: width: 100px; height 100px).

Linear-gradient ini tidak terbatas hanya pada dua warna, anda bisa menambahkan warna lain dengan dipisahkan tanda koma "," seperti pada contoh berikut.

Berikut ini contoh penulisan penggabungan beberapa warna.

  .contoh2 {
    background: linear-gradient(red, white, black);
  }

Berikut hasilnya

background: linear-gradient(red, white, black);

Warna dan sudut

Pada contoh sebelumnya, arah gradien tidak ditentukan, tapi arah gradien otomatis mengarah kebawah. Jika anda ingin bisa mengatur arah gradiennya. Berikut penjelasannya.

Anda bisa menuliskan arah tersebut dengan "to". Misalnya pada contoh berikut menggunakan bottom (bawah) dan right (kanan)

  .contoh3 {
    background: linear-gradient(to bottom right, red, white);
  }

background: linear-gradient(to bottom right, red, white);

Anda juga bisa menuliskan arah tersebut dengan "besar sudut" seperti berikut.

  .contoh4 {
    background: linear-gradient(135deg, red, white);
  }

background: linear-gradient(135deg, red, white);

Nol derajat dimulai dari atas, dan berputar mengikuti arah jarum jam. Misalnya 180 derajat adalah arah ke bawah.

Berikut ini contoh linier-gradient untuk 3 warna.

  .contoh5 {
    background: linear-gradient(90deg, red, white, blue);
  }

background: linear-gradient(90deg, red, white, blue);

Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

Sekian, Semoga bermanfaat