Css background linear Gradient direction from ( Left to Right )

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); }