CSS3 之前，必須依賴 Adobe Photoshop 等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。 而現在， 使用 CSS就可以創造出各種漸變效果了。漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性

CSS Code復制內容到剪貼板

<div class=’gradient1′></div>    
<div class=’gradient2′></div>    
<div class=’gradient3′></div>   

CSS 規則如下。

CSS Code復制內容到剪貼板

/*為元素盒子添加樣式*/    
div {    
 height:150px;    
 width:200px;    
 border:1px solid #ccc;    
 float:left;    
 margin:16px;    
}    
  
/*例 1：默認為從上到下*/    
.gradient1 {    
 background:linear-gradient(#e86a43, #fff);    
}    
  
/*例 2：從左到右*/    
.gradient2 {    
 background:linear-gradient(left, #64d1dd, #fff);    
}    
  
/*例 3：左上到右下*/    
.gradient3 {    
 background:linear-gradient(-45deg, #e86a43, #fff);    
}   

放射性漸變

在創建放射性漸變時，可以使用參數指定形狀、位置、尺寸、顏色和不透明度

CSS Code復制內容到剪貼板

.gradient1 {    
 background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);    
}    
.gradient2 {    
 background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);    
}    
.gradient3 {    
 background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,    
#4947ba);    
}