How can you make a gradient background in CSS?

I found a website, cssgradient.io, that allows you to create unique gradient backgrounds in CSS. The tool is very useful, because you get to choose the options and preview what it would look like as you are choosing each option.

Linear or Radial

You can choose linear if you want the colors to change from the top to bottom or left to right or other angles. Or you can choose radial if you want the colors to change from the center of the page to the outside.

Colors

You have to choose 2 colors. You can change the characteristics of the colors based on the lightness/darkness and how transparent the colors are.

Gradient Proportions

There is a slider at the top of the tool, that allows you to select what percent of the page each color will cover.

Gradient Examples

I found the most difficult part of using gradients is how they affect the readability of webpages. So I decided to use gradients very minimally, by choosing white as one color and black as the other color. I had white cover around 95% of the page and black only cover the top of the page where the links are. This highlights the navigation and the thin line of gradient between the black and white is very subtle, but makes the page look less flat.

The example to the right is much less subtle using very bright contrasting colors and a radial gradient.

green and red gradient