CSS Body Background Gradient Code

You will notice that this page has a background gradient. I've wanting to do this for couple of clients web site and had to search a while to get the right solution. Once I figured it out, it seems as it's pretty simply. If you ever need to do something similar, here it is:

body{
background-color:#d8dae8;
background-image:-ms-linear-gradient(top, #FFFFFF 0%, #00324A 800px);
background-image:-moz-linear-gradient(top, #FFFFFF 0%, #00324A 800px);
background-image:-o-linear-gradient(top, #FFFFFF 0%, #00324A 800px);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00324A));
background-image:-webkit-linear-gradient(top, #FFFFFF 0%, #00324A 800px);
background-image:linear-gradient(to bottom, #FFFFFF 0%, #00324A 800px);
}

 

Trick is to make sure you add all of these lines to render the page properly on most popular browsers. I always have a background-color just in case the gradient doesn't work in a browser for whatever reason. 

It's pretty simply, just replace the hex color codes and you are done. For this page: #FFFFFF = white and #00324A = blue.
Also, the height is important to control the gradient length. That's it. 


Add New Comment
Your Name
Email Address
Homepage
Comment
Human Verification 6 4 =