CSS COLOR GRADIENTS


What exactly are gradients?

Gradients simply represent the combination of two or more colors.


Types of gradients

  • Linear Gradients(down/up/left/right/diagonally)
  • Radial Gradients

Linear Gradient

Linear gradients are used to align two or more colors in a straight line, such as from top to bottom.


Top to Bottom


<html>
<head>
<style>
#grad1 {
  height: 100px;
  background: -webkit-linear-gradient(#0093E9,#80D0C7);
  background: -o-linear-gradient(#0093E9,#80D0C7);
  background: -moz-linear-gradient(#0093E9,#80D0C7);
  background: linear-gradient(#0093E9,#80D0C7);
}
</style>
</head>
<body>

<div id = "grad1"></div>

</body>
</html>
Live Demo!


Output:


Left to Right

<html>
<head>
<style>
#grad2 {
  height: 100px;
  background: -webkit-linear-gradient(left, #FFE53B , #FF2525);
  background: -o-linear-gradient(right, #FFE53B, #FF2525);
  background: -moz-linear-gradient(right, #FFE53B, #FF2525);
  background: linear-gradient(to right, #FFE53B , #FF2525);
}
</style>
</head>
<body>

<div id = "grad2"></div>

</body>
</html>
Live Demo!


Output:


Multi Color


<html>
<head>
<style>
#grad3 {
  height: 100px;
  background: -webkit-linear-gradient(left, #118ab2, #06d6a0, #ffd166, #118ab2);
  background: -o-linear-gradient(left, #118ab2, #06d6a0, #ffd166, #118ab2);
  background: -moz-linear-gradient(left, #118ab2, #06d6a0, #ffd166, #118ab2);
  background: linear-gradient(left, #118ab2, #06d6a0, #ffd166, #118ab2);
}
</style>
</head>
<body>

<div id = "grad3"></div>

</body>
</html>
Live Demo!


Output: