I am making a website for a school project and I want to know. Is is possible for the background of a website to change throught all of the colors like a gradient. I saw some options but i need a smooth change between the colors (like a fade).
Apply gradient as background-image
.
background-image: linear-gradient(90deg,blue,violet);
you can set background gradiant to any element in html for example :
body{
background: linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(253,253,253,1) 100%);
}
and I suggest you use this site
best websites for background gradiant is :
I hope I have been helpful
Linear gradient animation
var y = 0
setInterval(() => {
setColor(y);
y++;
}, 50);
function setColor(y) {
var x = document.getElementsByTagName('body');
x[0].setAttribute('style', 'background:linear-gradient(51deg, hsl(' + y + ',100%,50%) 0%, hsl(' + (y + 50) + ',100%,50%) 100%)')
}
All flat colors
var y = 0
setInterval(() => {
setColor(y);
y++;
}, 1);
function setColor(y) {
var x = document.getElementsByTagName('body');
var color = 'hsl(' + y + ', 100%, 50%);'
x[0].setAttribute('style', 'background:' + color + ';')
}
body {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Predefined colors:
setInterval(() => {
setColor();
}, 1000);
function setColor() {
var x = document.getElementsByTagName('body');
var rand = Math.floor(Math.random() * (5 - 0 + 1)) + 0;
var colors = ['#6495ED', '#D2691E', '#8B008B', '#8B0000', '#228B22', '#191970'];
x[0].setAttribute('style', 'background:' + colors[rand] + ';')
}
body {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}