CSS 그라디언트는 이미 2년전에  Webkit에 의해 도입되었지만, 여러 브라우져들과의
비호환성때문에 사용이 드물었습니다. 하지만 현재 CSS 그라디언트를 지원하는 파이어폭스(firefox) 3.6+ 덕분에
우리는 이미지로 만들 필요 없이 그라디언트를 만들 수 있습니다.
이번 포스트는 메이져 브라우져에서 가능한 CSS 그라디언트를 어떤 코드로 생성해야 할지 소개합니다.
(IE, Firefox 3.6+, Safari, Chrome)


웹킷 브라우져를 위한 CSS 그라디언트 
다음 코드 행들은 사파리,크롬과 같은 브라우져에서 top(#ccc)에서 bottom(#000)까지의 선형 그라디언트를 표현합니다.




Firefox 3.6+ 위한 CSS 그라디언트 




Internet Explorer 위한 CSS 그라디언트 
아래의 필터는 오직 IE에서만 읽어낼 수 있습니다.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');




Cross-Browser CSS Gradient (demo 데모 클릭)

위에 소개된 세 가지 소스를 모두 넣어 만든 크로스 브라우져 그라디언트 데모입니다.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */




CSS Gradient 드롭 메뉴

다음은 순수하게 CSS만을 사용하며 제작한 드롭다운 메뉴입니다.
(shadow, radius-border, box-shadow)

(이미지를 클릭하시면 데모를 보실 수 있습니다)



인터넷 익스플로러의 한계

인터넷 익스플로러에서는 그라디언트 color-stop, gradient angle, and radial gradient를 지원하지 않습니다
그렇기 때문에 단 2 가지의 색상만으로 수평 또는 수직 그라디언트만 할 수 있단 얘기죠;

마지막으로 주의사항 한가지.

모든 브라우저가 CSS의 그라디언트를 지원하지 않습니다. 안전을 위해서는 
CSS의 그라디언트의 레이아웃을 코딩에 의존하지 말고 레이아웃을 강화에 사용해야합니다.

원문 :http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/


/*****************************************************************************************/


background: #f1c660; /* Old browsers */
background: -moz-linear-gradient(top,  #fcf1d9 0%, #f1c660 50%);
background: -webkit-gradient(linear, left 0%, left 50%, from(#fcf1d9), to(#f1c660));
background: -o-linear-gradient(top, #fcf1d9 0%, #f1c660 50%);