CSS Gradients

You can easily make a cool gradient effect using CSS. Here's a simple example:

#gradient1{
    background-image: linear-gradient(red, yellow);
}
                    

You aren't limited to just two colors, either. You can add as many colors as you want like this:

#gradient2{
    background-image: linear-gradient(red, orange, yellow, green, blue, purple);
}
                    

If you want to change the angle, just add an angle as the first argument:

#gradient3{
    background-image: linear-gradient(90deg, mediumvioletred, orange);
}
                    

Putting a percent after a color will set how far along the gradient that color will appear:

#gradient4{
    background-image: linear-gradient(90deg, mediumvioletred, yellow 80%, orange);
}
                    

Putting a percent by itself will act the same, but for the midpoint of whichever colors it's between. It might be easier to see with an example:

#gradient5{
    background-image: linear-gradient(90deg, mediumvioletred, 80%, orange);
}
                    

#gradient6{
    background-image: linear-gradient(90deg, mediumvioletred, 20%, orange);
}