Background Gradient property is not working

Question

Can someone explain why isn\'t my Background Gradient property is not working.
How to achieve the background gradient without altering the position property?
NOTE :

Answer 1

The body element has no height. That is why your gradient is not working. Also use -moz- and webkit.

var drop = document.querySelector(".drop");

var button = document.querySelector(".button");

button.addEventListener("click", function(){
	drop.classList.toggle("animation");
});

body, html{
	margin: 0;
	padding: 0;
}

body{
background: rgb(#f98866);
background: -moz-linear-gradient(to right, #f98866, #ffffff);
background: -webkit-linear-gradient(to right, #f98866, #ffffff);
background: -o-linear-gradient(to right, #f98866, #ffffff);
background: -ms-linear-gradient(to right, #f98866, #ffffff);
background: linear-gradient(to right, #f98866, #ffffff);
height:100vh;
}

.parent{
position:absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	perspective: 1000px;

}

ul{
	padding: 0;
	margin: 0;
	margin-top: 10px;
}

li{
	list-style: none;
	padding: 15px 70px;
	background: #80bd9e;
	color: #fff;
	font-family: monospace;
	text-align: center;
	transition: 0.3s;

}

li:hover{
	background: #89da59;
	transform: skewX(-10deg);
}

a{
	text-decoration: none;
	color: #000;
}

.button{
	padding: 20px 70px;
	background: #ff420e;
	color: #fff;
	font-family: monospace;
	font-size: 1.5em;
	transition: 0.4s;
}

.button:hover{
	cursor: pointer;
}

.animation{
	transform: rotateX(-88deg);
	opacity: 0;
}

.button:hover{
	transform: rotateY(10deg);
}

.drop{
	transition: 1s;
}

	


	

		
Click Me!
		

			

				
Option
				
Option
				
Option
				
Option