Check out example codes for "gradient css background". It will help you in understanding the concepts better.

Code Example 1

/*From bottom to top*/
background: rgb(166,166,166);
background: linear-gradient(0deg, rgba(166,166,166,1) 0%, rgba(255,255,255,1) 29%);

Code Example 2

/* I know this has been answered by a lot of people */
/* But I just wanted to share this awesome color gradient with you*/
selector {
  background: linear-gradient(to bottom, rgba(255,0,100, 0.3), rgba(22,22,222, 0.9));
}
/* Paste this code in the css file */

Code Example 3

.element {
    background: linear-gradient(90deg, pink 50%, cyan 50%);
}

Code Example 4

#grad {
  background-image: linear-gradient(to right, #f1b1b1 , #82e6e8);

}

Code Example 5

.foo {
	background-image: linear-gradient(red, blue);
}

Code Example 6

background: linear-gradient(to left, #333, #333 50%, #eee 100%);

Learn ReactJs, React Native from akashmittal.com