HTML, CSS, javascript, PHP

CSS градиент на примере браузера firefox:

background-image: -moz-linear-gradient(top, green 30%, yellow 70%);

что значит эта запись: цвет градиента сверху полностью зеленый 30% высоты занимает, дальше идет переход от зеленого к желтому, этот переход длится 40% и остальные 30% внизу это желтый цвет, 

Можно не задавать стоп значения 30% и 70%, тогда градиент плавно перейдет от зеленого к желтому по всей высоте.

background-image: -moz-linear-gradient(top, green, yellow);

Значения для направления градиента:

• top
• right
• bottom
• left
• top left
• top right
• bottom left
• bottom right
• deg

top left - начинаетс из верхней левой точки и идет по диагонали к противоположной точке.

можно задавать градусы от -360 до 360, например, 45deg

Код для разных браузеров:

background: #1e5799; /* Для старых браузеров без градиента */
background-image: linear-gradient(top, green 30%, yellow 70%); 
background-image: -o-linear-gradient(top, green 30%, yellow 70%); /* Opera */
background-image: -moz-linear-gradient(top, green 30%, yellow 70%);  /* Firefox */
background-image: -webkit-linear-gradient(top, green 30%, yellow 70%); /* Chrome,Safari */
background-image: -ms-linear-gradient(top, green 30%, yellow 70%); /* IE10 */

Для версий IE6-9 можно использовать PIE:

-pie-background: linear-gradient(top, #ccc 30%, #fff 70%);

behavior: url(/PIE.php);

Если используется больше чем два цвета для градиента, то тогда вот так:

background-image: linear-gradient(top, #fff 0%, green 20%, yellow 50%, #0000ff %100%); 

Более кроссбраузерное решение это воспользоваться сервисом www.colorzilla.com/gradient-editor