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

#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?

CodePudding user response：

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" ></div>

CodePudding user response：

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" >
From left to right
</div>

CodePudding user response：

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