Linear Gradient

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-

Exercise-

Write code using HTML5 & CSS3 to generate the following output: