How to create CSS gradient colored backgrounds

Here are some examples of gradients drawn from Web Design in Easy Steps.

A simple top-to-bottom gradient

background: linear-gradient(purple, yellow);
    
    

Creating a diagonal gradient

background: linear-gradient(45deg, purple, white, red, yellow);
    
    

Creating a gradient using color stops

background: linear-gradient(
        45deg,
        red 10%, 
        orange 15%, 
        yellow 25%, 
        green 45%, 
        blue 75%, 
        indigo 90%, 
        violet 100%
        );
    }
    
    

Setting the direction of the gradient using words

background: linear-gradient(to bottom right, red, blue, pink);
    
    

This is a demonstration file from Web Design in Easy Steps by Sean McManus.
Back to demo files index.