Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器

Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器

很早以前,網頁設計背景傾向使用圖片並排顯示,因此有一些網站利用連續重複來拼湊出的漂亮背景圖案,例如:BgPatternsBgrepeat,後來這個方法較少人使用。近年網站設計多半直接用 CSS 來設定顏色,有些則會使用模糊背景效果,我猜這可能從 Windows Vista 之後的毛玻璃特效(Windows Aero)有關,無論如何,現在你可以使用線上工具輕鬆做出模糊背景效果,然後加到你的網站專案中。

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

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

網站名稱:Unique Gradient Generator
網站鏈結:https://gradient.quasi.ink/

使用教學

STEP 1

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

Unique Gradient Generator

STEP 2

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

Unique Gradient Generator

STEP 3

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

你還能使用鍵盤上的「方向鍵」來移動背景範圍,「R」鍵可隨機產生。

Unique Gradient Generator

STEP 4

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

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

Unique Gradient Generator

分享本文