Blend 網頁漸層背景產生器，選擇顏色即時預覽建立 CSS 原始碼

現在很常在網路服務或網站上看到漸層背景應用，記得早期都必須使用圖片堆疊出來，不過後來已經可以寫入 CSS 樣式，只要指定顏色代碼和呈現方式即可。雖然知道有這功能，但要立即寫出來好像也不是那麼容易，還好有網站可以參考，例如 Gradient Backgrounds 收錄各種漸層背景產生器的一站式工具，簡單一點還有 ColorSpark、CoolHue 這類漸層色組合產生器，可快速建立 CSS3 語法，複製到網站就能套用。

本文要介紹的「Blend」是一款讓使用者建立、自訂 CSS3 漸層背景的線上工具，選擇兩種顏色，點選 Let’s Blend! 將漸層效果直接預覽顯示於網站背景。Blend 還能控制漸層角度、線性漸層（Linear Gradients）或徑向漸層（Radial Gradients），最終產生對應的程式碼。

如果你在開發網站或網路服務時正好需要漸層背景，不妨打開 Blend 網站試試看，就能很快速很簡單地解決背景顏色需求。

網站名稱：Blend
網站鏈結：https://www.colinkeany.com/blend/

使用教學

STEP 1

開啟 Blend 網站，從左右兩邊設定一下漸層的顏色，點選中間的 Let’s Blend! 混合。

STEP 2

混合後直接從 Blend 背景預覽效果，看看是不是符合自己的期待。

STEP 3

右上角可以切換漸層模式，例如線性漸層或徑向漸層，點選線性漸層時還能調整漸層的角度數據，調整時背景預覽會即時更新。

STEP 4

最後，點選右上角按鈕就能產生對應的 CSS 程式碼囉！將它加入網站的樣式表，就能看到漸層背景效果出現在網頁中。