<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh Penggunaan Transparansi dengan Gradient</title>
<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Standard syntax */
		background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
	}
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.