Gradient background with peppy colors can attract the attention of users. Thus, choose a gradient background instead of using a plain color as the background. In this HTML CSS tutorial, let’s see how to add gradient background easily.
You can also prefer watching tutorial video given below.
The CSS style property background and the function linear-gradient(). The linear-gradient() accepts arguments for the direction and the colors.
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to right, blue, red);
}You can name the direction like to right, to left, to bottom, to bottom left etc. You can also add as many colors you want.
Following is the complete code to create beautiful gradient background in HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom left, aqua, lime);
}
</style>
<title>CSS Gradient Background Example</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
You will get the following output.
That’s how you create gradient background in HTML.
