文、G小編
網頁該呈現什麼樣的風格？可別小看網頁背景的設計，背景就像綠葉一樣，能襯出紅花的美，有時候越素雅簡單的背景，更能突顯主視覺或主商品的重要性，回顧一下2017年的網頁設計趨勢裡提到，漸層背景成為潮流，已有不少企業也跟上潮流，炫麗的漸層配色，如果搭配的巧，就像幸福的極光般，增添不少美感，例如：
截圖自Stripe官網
截圖自Asana官網
Instagram的LOGO改為較亮眼的漸層色 / 截圖自Instagram fb首頁
截圖自EVERNOTE官網
以下就來介紹4個打造炫麗的漸層背景神器，讓你在網頁設計的時候，也能輕鬆追求潮流又不奇怪。
1. WebGradients 網址點我
網站內提供了180款線性的漸層色，只要按下Copy CSS，一鍵就可以輕鬆套用網頁背景，非常方便，網站同時也提供色碼資與PNG檔案下載。
只要在你喜歡的顏色，按一下左鍵，就可以預覽所選擇的背景感覺。
如果你想要得到這些漸層顏色的SKETCH與PSD檔案，可以點擊網頁右上方的下載按鈕，可以自由輸入價格，如果喜歡，也不要吝嗇給予贊助喔！
2. Unique gradient generator 網址點我
一進網站，所看到的背景就是預覽的結果，透過右上方的設定條件產生出許多不同的漸層背景。
利用x和Y去調出自己喜歡的顏色，Sample area則是範圍大小，也可以利用Randomize隨機產生背景。
另外，介紹一下下方的選單，透過Browse image可以上傳你的照片，而網站所選取的是照片裡的色系，並非是照片本身。
它會自動截取照片裡的某一塊顏色，如果你不喜歡，可以去調整X和Y的位置，就會有不一樣的色塊出現了。
選擇Select source image也是同樣的道理，裡有提供預設的照片，一樣是挑照片裡的色系，再去調整X和Y的位置，也可以利用鍵盤的方向鍵來移動位置。
選好背景色後，按下Generate CSS就可以複製CSS語法，使用在你的網頁裡囉！網站也有提供社群按鈕的分享，喜歡的朋友，也不要吝嗇和你的朋友分享。
3. Ultimate CSS Gradient Generator 網址點我
網站內有提供約137種預設的漸層樣式，網站雖然看似有點陽春，但其實有很多功能喔！
小編偷吃步，先從預設裡挑一款，再來逐步調整是最快的方式，可以透過hue/saturation和reverse變更顏色，就可以在右上方的Preview看到色彩的變化了。
它的介面和Photoshop很像，非常親民，如果你想新增一個一個中間色，只要點一下，就會出現了。
網站提供了5種漸層的呈現方式可以變更，如果調整完成，也可以把這組顏色儲存起來，另外，網站也有提供CSS語法可以直接複製使用。
網站還提供import css與import image的方法。
照片匯入一樣是抓取照片的色系，另外要特別注意圖檔的大小，如果過大會發生錯誤。
4. CSS Gradient Background Maker 網址點我
網站的使用方式也蠻簡單的，也是比較陽春的網站。
網站提供Linear、Circular與Elliptical三種漸層模式，而每一種模式又有不同的顯示方式可以選擇，就能變化出很多種可能。只要選擇開始和結束的顏色，中間變化的顏色電腦會幫你算出來。
當然你也可以按下Add Stop選擇加入幾個顏色，在Offest欄位可以改變數值，去調整漸層顏色的位置，就可以調出不一樣的漸層，最後，也提供了CSS語法方便使用於網站上。
官方網站：http://www.lccnet.com.tw
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
延伸閱讀
聯成電腦資訊分享：畫Wireframe有障礙嗎？千萬別錯過MockFlow！(下)
留言列表