Uber cool CSS3中的線性漸變

Question

是否可以創建（沒有圖像），看起來很酷的線性漸變，就像在Ribbon菜單控件中看到的那樣？

有沒有人知道任何教程，文章資源或樣品，展示/炫耀這種漸變？

Answer 1

背景漸變：

background: -moz-linear-gradient(center top , #ededed, #ededed) repeat scroll 0 0 transparent; 
border: 1px solid #e1e1e1; 
/* For WebKit (Safari, Google Chrome etc) */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ededed)); 
/* For Mozilla/Gecko (Firefox etc) */ 
background: -moz-linear-gradient(top, #ededed, #ededed); 
/* For Internet Explorer 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed); 
/* For Internet Explorer 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed)"; 

文字陰影效果：

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 

Answer 2

http://www.colorzilla.com/gradient-editor/

我已經在過去使用此。這是很好的，因爲它使漸變的風格，因爲確切的語法還沒有很好的定義。