CSS3 Gradient

Dengan gradient, kamu bisa mengkombinasikan dua atau lebih warna dengan baik.

Ada dua tipe gradasi di CSS3 yaitu: linear (samping, bawah, diagonal) dan radial (ada titik di tengah).

Gradient linear

Linear ini berupa garis transisi warna. Bisa transisi ke atas, samping ataupun diagonal.

Syntax linear gradient

Syntax untuk membuat gradient adalah:

background-image: linear-gradient(arah, warna1, warna2, ...);

warna1, warna2 bisa diganti dengan kode warna html.

Gradient atas ke bawah

Secara default, arah gradasi warna yaitu dari atas ke bawah. Misal gradasi warna dari hijau ke kuning berikut:

#gradasi1 {
  height: 150px;
  width:100%;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(green, yellow); 
}

Gradient atas ke samping

Samping di sini bisa ke kanan atau ke kiri. Tinggal atur arah directionya saja.

Contoh gradasi dari kiri ke kanan.

#gradasi2 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(to right, green, yellow); 
}

Tambahkan to right sebagai arah direction, sebelum mendefinisikan warna.

Contoh gradasi dari kanan ke kiri.

#gradasi3 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(to left, green, yellow); 
}

Tambah kode to left untuk arah ke kiri.

Gradient diagonal

Untuk diagonal, harus didefinisikan dua arah gradasi.

Contoh arah ke bawah kanan

#gradasi4 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(to bottom right, green, yellow); 
}

Pada di rection saya tambahkan to bottom right untuk arah bawah kanan.

Contoh gradasi diagonal ke atas kiri.

#gradasi5 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(to top left, green, yellow); 
}

Supaya arah ke atas kiri tinggal ganti jadi to top left.

Gradasi dengan derajat angle

Jika kamu males untuk menambah direction arah gradasi seperti (to left, to right, to top left, dll) maka kamu bisa menggunakan derajat angle. Supaya lebih mudah, lihat animasi gif di bawah:

Derajat itu ada 360, dengan simbol °. Kalau kamu pernah sekolah di SD pasti sudah paham.

Nah disini logika kita harus bermain. Perhatikan animasi diatas. Ketika derajatnya 0 maka itu sama aja arah gradasinya vertikal, yaitu dari arah atas ke bawah.

Tapi jika derajatnya 90 maka gradasinya linear dari samping kiri ke kanan. Jika 45° maka akan diagonal, dst.

Syntax angle gradient

background-image: linear-gradient(derajat, warna1, warna2);

Contoh dengan 90 derajat. Ditulis 90deg pada direction.

#gradasi6 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(90deg, green, yellow); 
}

O ya, disini kamu juga bisa menulis derajat negatif ya. Misal -90deg.

Gradient banyak warna

Seperti yang sudah dijelaskan di awal, kita bisa membuat gradasi lebih dari dua warna.

#gradasi7 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(90deg, green, yellow, pink, red); 
}

Gradasi transparan

Khusus untuk transparant ini, kamu harus menggunakan kode warna css3 yaitu rgba atau hsla.

#gradasi8 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-image: linear-gradient(to right, rgba(0,255,0,0), rgba(0,0,255,1)); 
}

Gradasi dengan color stop

Contoh sebelumnya adalah gradasi yang linear transisi, maksudnya transisi dari satu warna ke warna lain itu smooth.

Kita bisa menentukan kapan gradasi warna itu berhenti (transisi warna). Atau mudahnya menentukan prosentase setiap warna.

Syntaxnya adalah:

linear-gradient(warna 1 angka%, warna2 angka%, dst)

#gradasi9 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-color: green; /* jika browser tidak support gradient */
  background-image: linear-gradient(to right, green 10%, yellow 70%, red); 
}

Repeating gradasi

Bisa juga kita merepeat atau mengulang gradasi warna. Dengan syntax:

repeating-linear-gradient(warna 1 angka%, warna2 angka%, dst)

Ingat: supaya bisa direpeat, warna harus ditentukan presentasenya. Dan total presentase tidak lebih dari 100%.

Contoh:

#gradasi10 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-image: repeating-linear-gradient(to left, green , yellow 10%); 
}

Gradasi radial (lingkaran)

Untuk yang linear udah selesai, nah sekarang yang lingkaran atau circle atau radial kalau bahasa CSSnya.

Syntaxnya adalah:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

#gradasi11 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-image: radial-gradient(green 20%, yellow, blue); 
}

Gradient radial dengan color stop (prosentase warna)

#gradasi12 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-image: radial-gradient(green 5%, yellow 20%, blue 50%); 
}

Gradient set shape

Bisa juga diatur bentuk jenis lingkarannya seperti apa. Valuenya ada dua, yaitu: circle atau ellipse.

#gradasi13 {
  height: 150px;
  width:100%;
  margin-bottom:30px;
  background-image: radial-gradient(circle, green , yellow, black 50%); 
}

Atur ukuran shape lingkaran

Ada empat value yang bisa kamu gunakan untuk mengatur ukuran circle atau ellipse, yaitu:

• farthest-side
• closest-side
• farthest-corner
• closest-corner

#gradasi15 {
  height: 200px;
  width:100%;
  margin-bottom:30px;
  background-image: radial-gradient(circle closest-corner at 90% 55%, green , yellow, black 30%); 
}

Repeating radial gradient

Kita bisa merepeat atau mengulangi radial gradasi, dengan mengganti radial-gradient menjadi repeating-radial-gradient.

#gradasi14 {
  height: 200px;
  width:100%;
  margin-bottom:30px;
  background-image: repeating-radial-gradient(circle closest-corner at 90% 55%, green , yellow, black 30%); 
}

Gradient generator

Gak mau puyeng?

Pakai tools gradient generator aja, seperti: cssgradient.io, atau ketik aja di google css3 gradient generator.

Properti CSS3 Gradient

Berikut ini adalah daftar property yang digunakan untuk mengatur gradient css3:

Properti	Keterangan
background-image	Mengatur lebih dari satu gradient