CSS Gradient Background

With the help of CSS, we can color the background of an element or the entire web page with combination of colors using gradient colorization.

The word gradient means increase/decrease in the magnitude of color. The color gets changed or transitioned smoothly. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{padding: 12px; height: 120px; color: white; margin: 20px 0;}
      div.a{background: linear-gradient(maroon, green);}
      div.b{background: radial-gradient(maroon, green);}
      div.c{background: conic-gradient(maroon, green);}
   </style>
</head>
<body>

   <div class="a">linear-gradient(maroon, green)</div>
   <div class="b">radial-gradient(maroon, green)</div>
   <div class="c">conic-gradient(maroon, green)</div>
   
</body>
</html>
Output
linear-gradient(maroon, green)
radial-gradient(maroon, green)
conic-gradient(maroon, green)

CSS Functions to Create Gradient Background

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!