Today we will see how to create simple gradient background using css3 code. The css3 code allows the linear-gradient attribute to display the gradient background. The below code is the one to display the background gradient.
background-image: linear-gradient(to bottom right, green, orange);
Here we can used to bottom right position, it displays gradient from top left to bottom right, You can use the different position like, to left, to right, to bottom, to top, etc... This simple background gradient you can use instead of plain background color for body or any sections. This is very very simple and easy to use, Here is the css code you can use it and also demo link check it out , I hope this is is useful.
background-image: linear-gradient(to bottom right, green, orange);
Here we can used to bottom right position, it displays gradient from top left to bottom right, You can use the different position like, to left, to right, to bottom, to top, etc... This simple background gradient you can use instead of plain background color for body or any sections. This is very very simple and easy to use, Here is the css code you can use it and also demo link check it out , I hope this is is useful.
Code for Simple Gradient Background:
<!DOCTYPE html>
<html>
<title>Simple Background Gradient for Website</title>
<head>
<style>
body {
background-image: linear-gradient(to bottom right, green, orange);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:780px;
}
</style>
</head>
<body>
<center>
<h1>Simple Background Gradient for Website</h1>
<p>This linear gradient starts at top left. It starts green, transitioning to orange:</p>
<h1>Simple Background Gradient for Website</h1>
<h2>www.sanwebcorner.com</h2>
</center>
</body>
</html>
<html>
<title>Simple Background Gradient for Website</title>
<head>
<style>
body {
background-image: linear-gradient(to bottom right, green, orange);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:780px;
}
</style>
</head>
<body>
<center>
<h1>Simple Background Gradient for Website</h1>
<p>This linear gradient starts at top left. It starts green, transitioning to orange:</p>
<h1>Simple Background Gradient for Website</h1>
<h2>www.sanwebcorner.com</h2>
</center>
</body>
</html>
0 Comments