Disini saya akan menjelaskan tentang gradien, gradien membiarkan anda mengunakan transisi halus antara dua atau lebih warna tertentu.
Sebelum anda mencoba menggukan css gradien, Anda harus mengunakan gambar untuk efek ini. Namun dengan menggunkan css3 gradien anda dapat mengurangi waktu download dan penggunaan bandwidth. Selain itu, unsur-unsur dalam gradien terlihat lebih baik ketika anda memperbesar, karena gradien yang dihasilkan oleh browser.

CSS3 mendefinisikan dua jenis gradien:

  • Linear Gradien(turun/naik/kiri/kanan/diagonal)
  • Gradien radial(didefinisikan oleh pusat mereka)

CSS3 gradien linear

Untuk membuat gradien linear anda harus menentukan setidaknya dua berhenti warna. Berhenti warna adalah warna yang anda inginkan untuk membuat transansi halus. Anda juga harus menentukan titik awal dan arah (arah sudut) bersama dengan efek gradien.
Contoh berikut menunjukan gradien yang dimulai dibagian atas. Dimulai merah, transisi ke biru.

Contoh gradien linear dari atas ke bawah

Linear Gradient - Top to Bottom


Dan ini kodenya: 
#grad {
  background: -webkit-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue); 
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue); 
}

Dan selanjutnya contoh graiden linear dari kiri ke kanan

Linear Gradient - Left to Right



Gradient Linear - Diagonal
Anda dapat membuat gradien diagonal dan dapat menentukan baik posisi awal horisontal dan vertikal
Contoh berikut menunjukan gradien linear dimulai dari kiri atas (dan pergi ke kanan bawah). Dan dimulai dari warna merah ke transisi biru

Linear Gradient - Diagonal



Dan ini kodenya : 
#grad {
  background: -webkit-linear-gradient(left top, red , blue); 
  background: -o-linear-gradient(bottom right, red, blue); 
  background: -moz-linear-gradient(bottom right, red, blue);
  background: linear-gradient(to bottom right, red , blue); 
}

Menggunakan Beberapa Stop Warna

3 Color Stops (evenly spaced)


7 Color Stops (evenly spaced)


3 Color Stops (not evenly spaced)


Dan ini Kodenya: 
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green, blue);
    background: -o-linear-gradient(red, green, blue); 
    background: -moz-linear-gradient(red, green, blue);
    background: linear-gradient(red, green, blue);
}

#grad2 {
    height: 200px;
    background: -webkit-linear-gradient
    (red, orange, yellow, green, blue, indigo, violet);
    background: -o-linear-gradient(red, orange, yellow, green,
    blue, indigo, violet);
    background: -moz-linear-gradient(red, orange, yellow, 
    green, blue, indigo, violet);
    background: linear-gradient(red, orange, yellow, green, 
    blue, indigo, violet);
}

#grad3 {
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%);
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); 
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%);
    background: linear-gradient(red 10%, green 85%, blue 90%);
}

Dan contoh berikutnya menunjukan cara membuat gradient linear dengan warna pelangi beberapa teks.


Gradient Background

Dan ini Kodenya: 
#grad {
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Standard syntax */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Mengulangi linear-gradient

Berulang linear-gradient () adalah fungsi yang dugunkan untuk menugulangi gradient linear.

Repeating Linear Gradient