WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法

WebGradients 收錄 180 種漸層背景免費下載,CSS 3 樣式語法產生器

現在一些新的網路服務都蠻喜歡使用漸層顏色作為背景,一來讓背景不那麼單調,再者是 CSS3 之後加入 linear-gradient 參數表示漸變色背景圖,除了顏色外還能控制漸層的角度等等,幾乎只要幾個控制參數就能做到,在應用上更為靈活。如果你想要在網站開發或部落格使用漸層背景,之前我推薦的「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」是一個方法,另外本文要介紹的 WebGradients 就更厲害一些。

WebGradients 是一個收錄 180 個線性漸變背景免費集合的網站,你可以從這裡挑選網站背景,利用產生的 CSS 語法將它快速套用到你網站的任何部分。WebGradients 讓使用者能直接點擊後預覽背景效果,一鍵產生 CSS 語法或下載 PNG 圖片格式。

此外,WebGradients 還提供免費的 Photoshop 和 Sketch 下載!如果需要的話,你能從網站上找到購買鏈結,自由贊助金額,亦可免費取得這兩種素材組合包。

網站名稱:WebGradients
網站鏈結:https://webgradients.com/

使用教學

STEP 1

開啟 WebGradients 網站後,往下拖曳就能找到收錄的所有 180 種線性漸變背景顏色,網站右上角有兩個鏈結,分別是 .Sketch 和 .Psd 兩種不同圖片格式的線上購買鏈結。

WebGradients

STEP 2

WebGradients 收錄的每個背景顏色都有名稱、色碼及預覽圖。

WebGradients

點擊預覽後會直接放大、套用到你目前的網頁背景,就能看到該漸層顏色的變化效果。

WebGradients

STEP 3

點擊背景圖右上角的「下載」圖示可以取得背景圖的 PNG 格式,不過更方便的方式是點擊右下角的「Copy CSS」,WebGradients 會自動產生漸層圖案的 CSS 樣式並複製到剪貼簿,例如我取得的某一段語法看起來像這樣:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

只要把它加入你網站或應用程式的 CSS 樣式表就能輕鬆套用,非常簡單。

WebGradients

STEP 4

如果你想獲取這些漸層背景的 Sketch 或 Photoshop 原始圖檔,點擊網站首頁右上角的下載鏈結就能找到,會連接到 Gumroad 商店,可以自由填入購買價格(輸入 $0 元免費下載),若喜歡或覺得對你來說非常有幫助不妨付費贊助一下。

WebGradients
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6514