How Do I mix colors using CSS?

Question

Hey guys,

I want to have a box with two colors with silver on top and it should slowly fade into white, just as Apple's homepage background. How do i do that?

Thanks as always.

Answer 1

you are looking for gradient background?

http://www.tizag.com/cssT/background.php

look for "css gradient background"

there are more articles if you google: gradient background css

Answer 2

The basic idea is to use a background image that does the gradient for you. You sent the background color of the page to the "end" color of the gradient, then apply your gradient background image using CSS with a repeat in the opposite direction that you want the gradient to flow. So if you want a 100-pixel, silver to white, gradient from top to bottom you'd create a 100Hx1W pixel image that spans your colors from top to bottom. Set the background color to white and apply the background image repeating across the x axis. You can easily create the gradient using the gradient tool in Photoshop or GIMP.

#body
{
   background: #ffffff url(/images/bg.jpg) repeat-x;
}

Answer 3

If you want to use CSS3 here's a great example: http://css-tricks.com/examples/CSS3Gradient/

W/o CSS3, you have to make do with an image repeated horizontally (x-repeat), similar to what tvanfosson said.