Css background linear Gradient direction from ( Left to Right ) - html

Question

#myGrad {
background-image: linear-gradient(red, yellow);
}
<div id="myGrad">howdy I am fun</div>
In this code, I want to use a gradient from left to right. How can I apply left to right gradient background?

Answer 1

You can use different methods to achieve that, for example adding this keyword: to right. linear-gradient() docs
#myGrad {
background-image: linear-gradient(to right, red, yellow);
}
#myGrad {
background-image: linear-gradient(to right, red, yellow);
}
.myGrad{
width: 200px;
height: 200px;
}
<div id="myGrad" class="myGrad"></div>

Answer 2

You need only this property: background-image: linear-gradient(to right, red, yellow); if you want to left change it to ...to left,...
#grad1 {
height: 55px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, yellow);
}
div {
text-align:center;
margin:auto;
color:#888888;
font-size:40px;
font-weight:bold;
height:500px;
}
<div id="grad1" class="">
From left to right
</div>

Answer 3

The syntax of linear gradient is,
linear-gradient(direction, stop color 1 , stop color 2)
So you can write it as,
#myGrad {
background-image: linear-gradient(to right,red, yellow);
}