一秒提高格調！幫你快速生成網頁毛玻璃背景的酷站（附CSS代碼）

近年網站設計多半直接用 CSS 來設定顏色，有些則會使用模糊背景效果，我猜這可能從 Windows Vista 之后的毛玻璃特效（Windows Aero）有關，無論如何，現在你可以使用今天這個在線工具輕松做出模糊背景效果，然后加到你的網站項目中。

Unique Gradient Generator 是一個獨特的漸變背景產生器，跟一般 CSS 漸層背景語法功能不同，透過這項服務可以從網站提供的免費圖庫來挑照片，或是自己上傳，選擇要模糊顯示范圍。因為是放大顯示，僅會提取圖片上非常小的區域，將它擴展到 100% 大小，利用瀏覽器圖片平滑算法來產生最佳效果。

另一大特色是：Unique Gradient Generator 不會產生冗長的 CSS 程序代碼！網站生成的原始碼非常精簡，使用 base64 編碼，只有幾 bytes 大小。如果你是網站開發者，想要一個簡單又不會過于單調的背景圖，這是不可多得的好工具。

Unique Gradient Generator

STEP 1

開啟 Unique Gradient Generator 網站后，網站背景就是使用這項服務產生，應該能了解它能產生什么樣式的背景圖，其實還蠻好看的，簡簡單單。

STEP 2

點選下方的「Browse Image」來瀏覽網站提供的圖庫，點選即可選擇使用，或者你也可以自己上傳圖片。要記住的是 Unique Gradient Generator 只會選擇圖片里的小范圍，然后放大顯示，重要的是找到你所需的背景「色系」而不是圖案。

STEP 3

主要設定工具在右上角「Controls」，可調整要取用的圖片范圍、區域大小。如果你沒有特別想要那個范圍，可以點選「Randomize」隨機顯示，看看是不是喜歡的背景圖案。

你還能使用鍵盤上的「箭頭鍵」來移動背景范圍，「R」鍵可隨機產生。

STEP 4

最后，點選底下的「Generate CSS」來產生對應的 CSS 原始碼。

如前面所述，Unique Gradient Generator 產生的 CSS 代碼會利用 base64 編碼，只有使用到兩種 CSS 屬性，在套用上非常簡單！效果也很不錯！

【優設酷站22連發！】

1. 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com