Background gradasi dari kiri ke kanan dari hijau ke transparan

Untuk membuat background dengan gradasi dari kiri ke kanan dari hijau ke transparan pada CSS, Anda dapat menggunakan properti background dan linear-gradient.

Berikut adalah contoh kodenya:

div {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, #00FF00, transparent);
}

Penjelasan kode di atas:

div adalah elemen HTML yang ingin diberi background dengan gradasi.
width dan height digunakan untuk menentukan lebar dan tinggi elemen div.
background digunakan untuk menentukan background elemen div. Properti ini memiliki nilai berupa linear-gradient yang menandakan bahwa gradasi berbentuk garis lurus, kemudian diikuti oleh arah gradasi to right yang artinya gradasi akan dimulai dari kiri ke kanan. Selanjutnya, diikuti oleh warna awal gradasi yaitu #00FF00 yang merupakan kode warna hijau. Sedangkan, transparent digunakan untuk memberikan efek transparan pada akhir gradasi.
Dengan kode di atas, maka elemen div akan memiliki background dengan gradasi hijau ke transparan dari kiri ke kanan. Anda dapat mengubah nilai warna hijau menjadi warna lain sesuai keinginan Anda.

Berikut adalah contoh HTML yang dapat digunakan untuk menampilkan div dengan latar belakang gradasi dari hijau ke transparan secara horizontal:

<title>Contoh CSS Background Gradasi</title>
	<style>
		div {
			width: 100%;
			height: 200px;
			background: linear-gradient(to right, #00FF00, transparent);
		}
	</style>
	<div></div>

Kode CSS di atas digunakan untuk membuat div dengan lebar 100% dan tinggi 200px, serta latar belakang berupa gradasi dari warna hijau (#00FF00) ke transparan secara horizontal dari kiri ke kanan. Kemudian, div tersebut ditampilkan dalam elemen body pada halaman HTML.

Berikut ini contohnya hasilnya :

Contoh CSS Background Gradasi

Contoh penerapannya, bisa dilihat DISINI.
Dalam contoh dilink tersebut, saya tambahkan juga rumus untuk memberikan harga wiremesh otomatis yang didapat dari Jayasteel.
Codenya adalah sebagai berikut:

<div style="background: linear-gradient(to right, rgb(151, 178, 170), transparent); 
border-radius: 5px; 
color: #4d487a; 
font-size: 2em; 
padding: 1rem;"> 

<b>Harga Wiremesh M7 = 
<script>kode javascrip untuk menampilkan harga per kg</script> 
per kg.
<br>Update 
<script>kode js untuk menampilkan bulan dan tahun sekarang</script> 
adalah= 
<script>kode js untuk menampilkan harga per lembar</script> 
per lembar</b>
</div>