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

linear-gradient() defines linear gradient for the background. The color will be placed from top to bottom
radial-gradient() - defines radial gradient for the background. The color will be placed from center to edges
conic-gradient() - defines conic gradient for the background. The color transitions tappers from a circular based to a point (around the center)
repeating-linear-gradient() - defines repeating linear gradient for the background
repeating-radial-gradient() defines repeating radial gradient for the background
repeating-conic-gradient() - defines repeating conic gradient for the background

CSS Online Test

« Previous Tutorial Next Tutorial »