xxxxxxxxxx
//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%);
}
xxxxxxxxxx
.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 */
}
xxxxxxxxxx
/* 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);
}
xxxxxxxxxx
background-image: linear-gradient(to bottom, rgba(45,45,45,0) 92%, rgba(128,128,128,0.4));
//No need of extra divs
xxxxxxxxxx
background: repeating-linear-gradient(to right top, rgb(0, 102, 255), rgb(0, 204, 255));
xxxxxxxxxx
background: rgb(16,22,46);
background: linear-gradient(90deg, rgba(16,22,46,1) 0%, rgba(9,95,173,0.7036064425770308) 50%, rgba(16,22,46,1
xxxxxxxxxx
Gradient Generator:
https://freetoolssite.com/tools/gradient-creator-online