Gradients have long been used in design to stylize backgrounds and text. When used properly the affect is subtle and gives the design a finished feel. Prior to the introduction of CSS gradients web designers were required to create 1px repeating backgrounds to implement a gradient, but since the introduction of CSS gradients a few years ago and growing browser compatibility designers can use a gradients without having to create an image. Now that we've had our little history lesson about CSS gradients lets get to what you really came here for.
/*****CHROME / SAFARI LINEAR CSS BACKGROUND GRADIENT ********/
background: -webkit-linear-gradient(120deg, #aaa, #fefefe);
Looking at the above CSS example we see the background gradient parameters are prefixed with "-webkit-linear-gradient". Linear denotes the type of gradient the gradient types for webkit are linear, radial. We will not be covering radial gradient here because they are not cross browser compatible. The next portion of the syntax is the starting point and the angle the gradient will follow. Last but not least we designate our colors to be used in the gradient.
NOTE: You can add more colora separated by a commas and they will appear in the order you list them.
/*****CHROME / SAFARI LINEAR CSS BACKGROUND GRADIENT ********/
background: -moz-linear-gradient(bottom, #aaa, #fefefe);
Leave a comment for us an we will see what we come up with. Or you can contact us directly through our contact form. Aquim Media is a web design company located in Shenzhen, China. We strive to help the open source community to better all of our tomorrow by working together towards a common goal.
Let's get into contact so you learn more about us and we can create solutions for you!