Linear Gradient – Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
Example-
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<style>
body {
height: 800px;
background: red;
background: linear-gradient(to bottom right, pink, green);
}
</style>
</head>
<body>
<h1>Linear Gradient – Diagonal</h1>
<p>This linear gradient starts at top left. It starts pink, transitioning to green.</p>
</body>
</html>
Output-
![](https://csclass2017.wordpress.com/wp-content/uploads/2018/05/gradient21.png?w=640)
Exercise-
Write code using HTML5 & CSS3 to generate the following output:
![](https://csclass2017.wordpress.com/wp-content/uploads/2018/05/gradient-4.png?w=640)