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 程式碼囉!將它加入網站的樣式表,就能看到漸層背景效果出現在網頁中。
值得一試的三個理由:
- 設定兩種顏色,直接於網頁中預覽漸層背景效果
- 可選擇線性漸層或徑向漸層,可設定漸層角度
- 產生 CSS 原始碼貼到網頁樣式表就能套用