近年網(wǎng)站設(shè)計(jì)多半直接用 CSS 來(lái)設(shè)定顏色，有些則會(huì)使用模糊背景效果，我猜這可能從 Windows Vista 之后的毛玻璃特效（Windows Aero）有關(guān)，無(wú)論如何，現(xiàn)在你可以使用今天這個(gè)在線(xiàn)工具輕松做出模糊背景效果，然后加到你的網(wǎng)站項(xiàng)目中。

Unique Gradient Generator 是一個(gè)獨(dú)特的漸變背景產(chǎn)生器，跟一般 CSS 漸層背景語(yǔ)法功能不同，透過(guò)這項(xiàng)服務(wù)可以從網(wǎng)站提供的免費(fèi)圖庫(kù)來(lái)挑照片，或是自己上傳，選擇要模糊顯示范圍。因?yàn)槭欠糯箫@示，僅會(huì)提取圖片上非常小的區(qū)域，將它擴(kuò)展到 100% 大小，利用瀏覽器圖片平滑算法來(lái)產(chǎn)生最佳效果。

另一大特色是：Unique Gradient Generator 不會(huì)產(chǎn)生冗長(zhǎng)的 CSS 程序代碼！網(wǎng)站生成的原始碼非常精簡(jiǎn)，使用 base64 編碼，只有幾 bytes 大小。如果你是網(wǎng)站開(kāi)發(fā)者，想要一個(gè)簡(jiǎn)單又不會(huì)過(guò)于單調(diào)的背景圖，這是不可多得的好工具。

Unique Gradient Generator

STEP 1

開(kāi)啟 Unique Gradient Generator 網(wǎng)站后，網(wǎng)站背景就是使用這項(xiàng)服務(wù)產(chǎn)生，應(yīng)該能了解它能產(chǎn)生什么樣式的背景圖，其實(shí)還蠻好看的，簡(jiǎn)簡(jiǎn)單單。

STEP 2

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

STEP 3

主要設(shè)定工具在右上角「Controls」，可調(diào)整要取用的圖片范圍、區(qū)域大小。如果你沒(méi)有特別想要那個(gè)范圍，可以點(diǎn)選「Randomize」隨機(jī)顯示，看看是不是喜歡的背景圖案。

你還能使用鍵盤(pán)上的「箭頭鍵」來(lái)移動(dòng)背景范圍，「R」鍵可隨機(jī)產(chǎn)生。

STEP 4

最后，點(diǎn)選底下的「Generate CSS」來(lái)產(chǎn)生對(duì)應(yīng)的 CSS 原始碼。

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

【優(yōu)設(shè)酷站22連發(fā)！】

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

原文地址：free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com