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

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

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

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

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

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

使用教學

STEP 1

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

Blend

STEP 2

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

Blend

STEP 3

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

Blend

STEP 4

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

Blend

值得一試的三個理由:

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