Shader Gradient 是一個專為設計師、開發者打造的線上工具，主要用於創建美麗的動態漸層效果，只要在瀏覽器即可設定，不用額外安裝任何的軟體或應用程式，創作出來的設計可直接在 Figma、Framer 和 React 元件上使用，對於設計師來說是非常棒的工具。
Shader Gradient 預先提供多種不同的漸層效果設計，選取後直接在網頁上預覽，透過編輯器、調整各參數選項，包括圖形顏色、形狀、運動和視圖，設定後會即時呈現效果，最後點選複製即可取得自訂工具生成的鏈結並複製到剪貼簿。
從 Shader Gradient 網站可以找到 Figma、Framer 對應的元件鏈結，加入生成的動態漸層效果。
網站名稱：Shader Gradient
網站鏈結：https://www.shadergradient.co/
使用教學
操作步驟
選擇外掛類型、開啟線上自訂功能
開啟 Shader Gradient 後下方的控制列會顯示 Framer Plugin、Figma Plugin、React Component 鏈結，點選右側的「Try on web」進入自訂功能。
挑選預設配色與效果
先從上方的上下箭頭調整不同的預設配色，Shader Gradient 提供大約 10 種不同的設計效果。
再從下方的編輯器設定細節，例如圖案形狀、顏色、動態效果和視圖，設定後會即時顯示於上方。
調整動態漸層細節
還能調整動態漸層的形狀、雜訊強度、雜訊密度、螺旋和像素密度。
在動圖部分有動畫效果、速度、範圍等選項，我就不一一介紹了，使用者直接去手動調控、設定後就會顯示預覽。
生成鏈結並應用到設計工具
最後點選右下角「Copy URL」將鏈結複製就大功告成！複製後可以分享或是使用於 Figma、Framer。
值得一試的三個理由：
- 免去繁瑣的軟體安裝，隨時隨地創建動態設計效果
- 支援 Figma、Framer 和 React 元件，讓工作流程更流暢
- 具有豐富的編輯功能，滿足設計師的創意需求
