Menu
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?
you can do this.
.container{
background:linear-gradient(90deg, Red, Orange, Yellow, Green, Blue, Indigo,violet);
width:500px;
height:500px;
}<div class="container"></div>if it helps you let me know
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);
}
28
answered Jul 15 '26 14:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With