All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

CSS Background-Color Gradient

Last Updated : Mar 11, 2024

CSS Background-Color Gradient

In this tutorial we will show you the solution of CSS background-color gradient, gradient means smooth transitions between two or more specified colors. Mainly, in CSS there are three types of gradients which are Linear Gradients, Radial Gradients, Conic Gradients

Now, let us understand about these gradients one by one.

Step By Step Guide On CSS Background-Color Gradient :-

In this article, today we are going to understand about linear Gradient whereas in next articles we will see how to use radial and conic gradient.

In this type of gradient, we have to specify at least two colors for smooth transitions. Whereas the direction can be modified according to requirements. Linear Gradients can go up/ down/ left/ right and diagonally.

Let us see a simple syntax of this gradient.

linear-gradient(direction, color1, color2, ...);

As, there are many directions in which we can apply our linear gradient and we already see the syntax that how to use this gradient.

Now, below is an example in which we see how to use this syntax in codes.

<!DOCTYPE html>
<html>
<head>
   <title> CSS tutorials </title>
 <style>
  #grad1 {
  height: 200px;
  background-color: green;
  background-image: linear-gradient(to right, green , white);
}
#grad2 {
  height: 200px;
  background-color: green;
  background-image: linear-gradient(green, white);
}
#grad3 {
  height: 200px;
  background-color: green;
  background-image: linear-gradient(to bottom right, green, white);
}
#grad4 {
  height: 200px;
  background-color: green;
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad5 {
  height: 200px;
  background-color: green;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
 </style>
</head>
<body>
<h1>
 TalkersCode – CSS tutorials
</h1>
<h2>
 CSS background color gradient
</h2>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad1"></div>
<h1>Linear Gradient - Top to Bottom</h1>
<div id="grad2"></div>
<h1>Linear Gradient - Diagonally</h1>
<div id="grad3"></div>
<h1>Linear Gradient - MultiColor</h1>
<div id="grad4"></div>
<h1>Linear Gradient - RainBow</h1>
<div id="grad5"></div></body>
</html>
  1. As, here we see that we that in above example we show you an example in which html and CSS codes are used.
  2. Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
  3. After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
  4. Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paired tag.
  5. Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on the screen is written under the body tag
  6. As, we see here many types of gradients. This is only a Tutorial, you are also able to create more patterns from reference of these examples.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand about background color gradients in CSS.

I hope this tutorial on CSS background-color gradient helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪