Gradient Studio 免費線上漸層產生器，8 種風格 12 種形狀任意組合，還內建 104 款日文字體做發光文字

漸層背景搭配一行發光文字，近年幾乎變成社群貼文、YouTube 頻道封面、Instagram 限動、甚至桌布的標準視覺，想做出這種效果過去多半得開 Photoshop 疊圖層、調色彩混合模式，或是到處找現成的漸層模板拼湊，對於不熟修圖軟體的人來說門檻其實不低。

網路上雖然也有不少線上漸層產生器，但用過幾款後常會卡在幾個地方，有些只提供固定的幾組配色，想做出流動或發光感的效果得自己土法煉鋼，有些匯出格式有限，只能存一張解析度普通的 PNG 格式圖檔，無法取得 CSS 樣式表，貼上網站做更多應用，這些都是比較可惜的地方。如果只是想要純 CSS 漸層背景語法，也可以參考「Grabient」與「WebGradients」，但兩者都只能輸出背景色彩，做不出疊加文字與形狀的效果。

Gradient Studio 是什麼？

本文要介紹的「Gradient Studio」是一款把這些需求一次滿足的免費線上漸層與發光文字產生工具，由日本團隊 Cast Japan 推出，它提供 8 種風格與 12 種形狀的組合，風格包含 Blade、Orb、Horizon、Fiber 等偏發光質感的效果，也有走流動路線的選項，形狀則涵蓋不同的線條與色塊配置，透過不同的組合配置可以製作出各種變化。如果需要能匯出到 Figma、Framer 的動態 3D 漸層，「Shader Gradient」是另一個方向，但它不含疊加發光文字的功能。

Gradient Studio 內建 36 組「おすすめ（推薦）」預設選項，不知道從何開始可以直接帶入，再進行細部調整，文字排版提供 104 款日文字體，從手寫體、毛筆字到明朝體、點陣字都有，也支援載入電腦本機字體。

整個運算過程採用 WebGL 技術，完全在瀏覽器內完成，官方說明不會把任何內容上傳到伺服器，不需註冊，也可以完全免費使用！做好的成果可以匯出成 CSS 樣式表直接貼進網頁使用，或是輸出長邊 1600px 的 PNG 圖檔，且生成的圖片與代碼可自由用於商業與非商業用途，不需要標註出處。

網站資訊

使用教學

認識介面並選擇形狀

開啟 Gradient Studio 網站後，介面主要分成上方的「デザイン（設計）」「テキスト（文字）」「書き出し（匯出）」三個分頁，畫面右側是即時預覽的漸層畫布。

先停留在「デザイン」分頁，往下可以看到「形狀」區塊，列出 12 種形狀縮圖，點選任一種即可套用到畫布上。

選擇風格或套用推薦預設

接著在「スタイル Style」區塊選擇樣式，這裡有 8 種風格可選，像是 Metallic、Chrome、Neon 和 Pastel 等，點選後會立刻套用新的視覺風格。

如果不想從零調整，也可以直接展開下方的「おすすめ」推薦區塊，裡面有 36 組已經配好形狀、風格與色彩的預設值可以一鍵套用。

挑選符合需求的預設值

我會建議直接從這裡選擇比較偏向自己需要的預設值，再進行細部上的調整，例如顏色或文字等。

調整配色、縮放與紋理效果

往下到「カラー（配色）」區塊調整顏色，可以直接拖曳畫布上的色點調整分佈位置，也能新增色彩節點，或按「シャッフル」隨機打亂配色找靈感。

下方的「フィールド」區塊可以拉動「スケール（縮放）」與「ゆがみ（扭曲）」兩個滑桿，控制漸層的鋪陳範圍以及扭曲程度，再往下的「方向」控制漸層流動方向，「質感」提供 7 種紋理效果可以疊加。

Gradient Studio 最棒的是所有操作都會立即更新在右側的畫布預覽，即使不熟日文也能輕鬆操作。

加入日文發光文字

漸層調整滿意後，切到上方的「テキスト（文字）」分頁加上文字。

輸入內容後，可以設定字型、粗細、顏色、文字大小，也能調整位置 X、位置 Y 決定文字擺放的座標，並設定對齊方式與陰影效果。內建 104 款日文字體可以直接在清單中選用，如果想用自己電腦裡的字型，也可以點「PCのフォントを読み込む」載入本機字體。

匯出 PNG 圖檔或 CSS 代碼

完成設計後，切到「書き出し（匯出）」分頁。

這裡可以選擇輸出格式，PNG 匯出會以 sRGB 色彩空間輸出長邊 1600px 的圖檔，點「PNGを書き出す」即可下載（畫布預覽右下角也有相同的按鈕）。如果想要的是可以直接套用在網頁上的效果，畫面也會顯示對應的 CSS 代碼區塊，點旁邊的「コピー」就能把代碼複製到剪貼簿。

以下就是我使用 Gradient Studio 製作出來的漸層圖加上文字效果。

使用前的提醒

Gradient Studio 的介面文字是日文，雖然操作以點選、拖曳為主，不懂日文也大致能上手，但如果想準確理解每個選項的作用，建議搭配瀏覽器的翻譯功能對照使用。

另外，內建的 104 款字體以日文字型為主，用來排中文文字時，中文字元不一定能正常顯示或套用對應的字型效果，需要中文排版的話建議先實際測試，或是只用它產生漸層背景，改用可拖曳調色點的「Mesh 漸層色背景產生器」，文字部分另外用其他工具處理。

整體用下來，我覺得 Gradient Studio 最適合拿來做社群貼文或頻道封面這類一次性視覺，不需要註冊，也不用把素材上傳到任何地方，介面雖然是日文，但配色與形狀都能靠滑動與點選調整，不太需要看懂每個選項的意思。如果只是要抓現成的 CSS 漸層背景，前面提到的幾款工具會更直接，但想要漸層加發光文字一次做完，這款是我測試過裡面選擇最多的。