How To Design A Gradient Background Of A Page With Unfixed Height

How to design 1) a vertical gradient background with unfixed height, 2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest h

Solution 1:

There is a way to do it, you will want to take advantage of the available background properties:

body {
    background-color: green;
    background-image: linear-gradient(blue, white, green);
    background-repeat: no-repeat;
    background-size: 100%600px;
}

Live example: http://jsfiddle.net/sl1dr/PxNhY/

If you want an unfixed height then replace 600px with 100%.

EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/

Solution 2:

You can try crossbrowser (ie5.5+) linerar gradient generator

Solution 3:

This Link: Css Gradient From Green To White To Blue

Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds. You can generate Professional gradients and get the code for pasting in your own css file. You must know that the css may not support some versions of IE