Cara Membuat Warna Gradien (RGB) Dengan CSS dan HTML

Cara Membuat Warna Gradien (RGB) Dengan CSS dan HTML, kali ini saya akan berbicara tentang gradien CSS. Gradien adalah campuran beberapa warna dalam bingkai. Biasanya ringan, sedang hingga tua. Saat ini banyak programmer atau desainer yang menggunakan warna gradasi karena dengan menggunakan aplikasi/website warna gradasi terlihat lebih halus dan enak dipandang daripada warna solid yang terlalu mencolok. Tapi tentunya sobat juga menggunakan warna yang halus untuk tampilan yang mulus, jangan sampai membuat kombinasi warna yang aneh-aneh yang membuat tampilan aplikasi menjadi jelek.

Berbagai warna gradien
Anda dapat menggunakan beberapa jenis warna gradien, seperti kanan ke kiri, atas ke bawah, kiri atas ke kanan bawah, dan banyak lagi. Karena untuk contoh ini, saya akan banyak menggunakan warna solid, jadi kedepannya teman-teman bisa mencoba membuat warna yang semenarik mungkin. Berikut adalah berbagai warna gradien yang dapat Anda gunakan di situs web Anda.

1. Linear Gradien – Atas ke bawah

#ztncode {
  background-image: linear-gradient(yellow, red);
}

Pada contoh di atas, saya menggunakan warna solid dan hanya menyebutkan warna dalam bahasa Inggris, seperti yellow, red, green, blue, black, gray, dll, tetapi teman-teman juga dapat menggunakan warna hex atau RGB. Kemudian tambahkan id di html sebagai berikut (karena saya memberi contoh #ztncode, tanda # adalah id, tetapi jika Anda ingin menambahkannya ke class, gunakan .ztncode untuk mengganti tanda # dengan titik "." code HTML nya seperti di bawah ini

<div id="ztncode">Tulisan tangan</div>

Hasilnya:

2. Linear Gradien – Kiri ke Kanan

#ztncode {
  background-image: linear-gradient(to right, #4682B4, #00FFFF, #00FA9A);
}

Hasilnya:

3. Linear Gradient – Diagonal

#ztncode {
  background-image: linear-gradient(to bottom right, #FF0000, #FFC0CB);
}

Hasilnya:

4. Linear Gradient – Angles

#ztncode {
  background-image: linear-gradient(-90deg, red, yellow);
}

Hasilnya:

5. Linear Gradient – Multiple Color

#ztncode {
  background-image: linear-gradient(red, #FF1493, rgba(255,192,203));
}

Hasilnya:

6. Linear Gradient – Multiple Color Kiri ke Kanan

#ztncode {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Hasilnya:

7. Linear Gradient – Transparan

#ztncode {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Hasilnya:

8. Linear Gradient – Repeat/Mengulang Warna

#ztncode {
  background-image: repeating-linear-gradient(#00FA9A, #FFFF00 10%, #FF4500 20%);
}

Hasilnya:

9. Gradient – Radial

#ztncode {
  background-image: radial-gradient(red, orange, yellow);
}

Hasilnya:

10. Animasi Backgrund warna gradient

#ztncode {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #7CFC00, #00FF00, #EE7752, #E73C7E, #23A6D5, #23D5AB, #FFFF00);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}
 
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
 
@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
 
@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

Hasilnya: