Examples

The examples shown below are all linear gradients. They are impressive, and likely at least a little intimidating for anyone who hasn't spent time using CSS to create gradients. Luckily we'll be taking a look at what it takes to create the first gradient, which transitions from light orange to burnt orange, in the next section.

Source: Gradient Magic

A Closer Look

The image below shows the CSS with each color highlighted. Seeing it this way really helped me wrap my mind around how this particular gradient was made, and how I could go about making my own similar gradients in the future. Next we'll highlight how each parameter contributes to the overall effect.

In order to get the colors to transition from the bottom left to the top right corner we pass 45deg as the first parameter to the linear-gradient function. We could also have passed to top right which would be translated into the equivalent angle value.

The solid color bands are created by the pairs of color stops passed in as the other parameters. These color stops consist of a color value and a start/stop percentage. The first pair of color stops, rgb(238, 137, 17) 0%, rgb(238, 137, 17) 33%, tell the gradient to start using the lightest orange color from the beginning (0%) and stop once 33% of the overall gradient area has been covered.

The same logic is used to create the other solid color bands present in the gradient. I hope you are able to see at this point how you could create a gradient with as many color bands as desired using pairs of colors stops, and adjust the thickness of the bands by changing the start/stop percentages.