Search code examples
htmlcssbackgroundbackground-colorcolor-picker

How to create a full rainbow background

I am creating a custom color picker, and I do not know how to create a rainbow gradient background color. I would like to do the background without javascript if possible. Can someone please guide me on this?

Solution

  • You can use the following html code,

    #rainbow{
  height: 300px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, Red , Orange, Yellow, Green, Blue, Indigo, Violet);
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="rainbow"></div>

</body>
</html>

    You can also change this to make it from top to bottom

    #rainbow{
  background-image: linear-gradient(red, yellow);
}