Need a Cool Background in a Hurry?

Try creating one using CSS Gradients

CSS gradients let you create transitions between different specified colors. They can be used anywhere an <image> would be used. This is especially useful in the case where you need an aesthetically pleasing background but don’t have an image and also don’t want to just use a solid color. Using these “color transitions” there are a few different types of gradients you can create and I will provide you with an introduction to each.

The first is Linear Gradients that can go up, down, left, right, and diagonally. This gradient can also be directed using degrees. The main thing is that the color progress in a straight line. In creating a linear gradient you must define at least two color stops but could really have as many as you like. These stops are the colors that are going to be rendered upon completion of the transition.

Linear Gradient

The code for this might look a little something like…

background {
  background-image: linear-gradient(to right, yellow, purple);
}

Here we directing the gradient to flow from left to right from yellow to purple. If no direction is supplied as the first argument by default linear gradients run from top to bottom. In addition to directions like to right, to left, to top, to bottom directions can be combined like to bottom right or to top left, and can also be given using angles like 70deg.

As I mentioned earlier more it is possible to use more than one color.

Multiple Color Gradient

Colors can also be positioned by providing percentages of pixels to define their location. Using this technique hard lines can be created by setting each to 50%.

.solid-line { 
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); 
}

Traditionally the gradient moves evenly from one color to the next. However, if you want the transition to occur at a certain point in the gradient you can supply a middle argument as a percentage.

.multicolor-linear { 
   background: linear-gradient(to right, green 30px, red 70%, blue);
}

There you have it, just enough to get you started using gradients. If you want to explore them more check this article out.

https://www.w3schools.com/css/css3_gradients.asp