Setting Direction of Linear Gradients using Angles in CSS

CSS Web Development Front End Technology

For more control overt the direction of the gradient, define angle as in the below syntax −

background-image: linear-gradient(angle, color-stop1, color-stop2);

Following is the code for setting the direction of linear gradients using angles in CSS −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   height: 200px;
   width: 300px;
   display: inline-block;
   margin-right: 10px;
}
.linearGradient {
   background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
   background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using angles</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>