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

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

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

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

使用教學

STEP 1

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

STEP 2

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

STEP 3

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

STEP 4

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

值得一試的三個理由：

1. 設定兩種顏色，直接於網頁中預覽漸層背景效果
2. 可選擇線性漸層或徑向漸層，可設定漸層角度
3. 產生CSS 原始碼貼到網頁樣式表就能套用

1.歡迎大家在評論區評論

3.每天為您分享有價值的信息

同時希望大家多多轉發分享給更多的朋友哦！

閱讀更多 天時 的文章

關鍵字: 漸層 顏色代碼 技術