.yourElementClass{
background: linear-gradient(to top, #fff000 0%, #000fff 100%);
/* 1st property: from where the 100% starts */
/* 2nd property: the first color */
/* 3rd property: the second color */
/* to add some colors to the gradient, do the same thing of 2nd and 3rd properties, edit the color and the color-stop */
}
/* from up to down */
.bg-gradient {
background-image: linear-gradient(red, yellow);
}
/* from left to right */
.bg-gradient {
background-image: linear-gradient(to right, red, yellow);
}
//Build a gradient and copy the CSS code to use wherever!
// https://cssgradient.io/
//example:
body{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,0.3) 13%, rgba(0,212,255,1) 18%, rgba(0,212,255,1) 96%, rgba(0,9,89,0.3) 100%);
}
background-image: linear-gradient(to bottom, rgba(45,45,45,0) 92%, rgba(128,128,128,0.4));
//No need of extra divs
background: repeating-linear-gradient(to right top, rgb(0, 102, 255), rgb(0, 204, 255));
background: linear-gradient(Direction (keyword or degrees), color1 10% (10% width), color2 width (it's not neccessary), ...);