The best way to produce your background gradients is using generators:
http://www.colorzilla.com/gradient-editor/
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
The first argument (90 deg) indicates the direction of the gradient. By default is from top to bottom.
The second is the starting color, and the third (0%) is where the starting color start changing and diluting itself.
The second argument after the comma is the end color. The 50% indicates where in the container the color will end up being this #e4e4e4 color. In this case 50% because we have a third argument.
A third argument means we will have three colors in the background.
You can also get radial gradients:
background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
center indicates where the radial effect epicenter will be, you can also specify something like 25px 25px for example, to start 25px from the top, and 25px from the left
You can also specify repeating lines in the background, like:
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
This will produce radial lines every 5 px.
Here's an amazing gallery with some of the amazing background effects that can be accomplished with CSS:
http://lea.verou.me/css3patterns/