重點摘要
- 01支援所有三種 CSS 漸層類型 — 線性、徑向和錐形 — 並具有即時預覽。
- 02新增最多六個色彩停止點，每個都有獨立的位置和色彩。
- 03輸出是可完全貼上到任何樣式表中的完整背景宣告。
- 04無需註冊、無需安裝，無需上傳任何內容 — 所有內容都在您的瀏覽器中執行。
為什麼要使用視覺漸層產生器？
手動編寫 CSS 漸層會很快變得乏味。一旦您知道語法，語法就易於閱讀，但在沒有視覺預覽的情況下選擇確切的停止位置和色彩會將簡單的設計決定變成 DevTools 中的試錯。產生器可讓您即時查看結果，並在看起來正確時立即匯出乾淨的程式碼。
此工具支援所有三種現代漸層類型。線性是您用於英雄背景和按鈕的經典方向混合。徑向從一個點向外擴展 — 非常適合聚光燈效果和暈影。錐形繞著中心掃掠，使其成為圓形圖表段、色輪和微調器指示器的首選。從內建預設之一（Lime Swiss、Sunset、Sky、Aurora）開始，或從頭開始設計。
如何產生 CSS 漸層
整個過程耗時不到一分鐘。
- 01
選擇漸層類型
從類型選擇器選擇 [線性]、[徑向] 或 [錐形]。對於線性，還設定角度。預覽會立即更新。
- 02
新增和定位色彩停止點
點擊 [新增停止點] 以插入新停止點，然後拖曳其滑塊或輸入百分比來定位它。支援最多六個停止點 — 停止點會按位置自動重新排序。
- 03
選擇每個停止點的色彩
點擊色彩樣本以開啟系統色彩選擇器，或直接輸入十六進位值。RGB 和十六進位格式都可運作。
- 04
即時預覽
預覽面板使用瀏覽器的原生漸層引擎呈現您的漸層，所以結果與 CSS 在生產中產生的內容完全相符。
- 05
複製 CSS 宣告
點擊 [複製] 以取得完整的 background: linear-gradient(...) 宣告。貼到樣式表、樣式化元件或 Tailwind 任意值，例如 bg-[<value>]。
常見漸層使用案例
每種漸層類型在不同的場景中表現出色。
- 01英雄區段背景 — 135° 處的線性漸層可實現現代對角線掃掠。
- 02按鈕懸停狀態 — 細微的雙停止點線性漸層可增加深度。
- 03徑向聚光燈或暈影 — 圖像覆蓋上的深色到透明徑向。
- 04圓形圖表和進度環 — 具有硬停止點的錐形漸層。
- 05色輪選擇器預覽 — 完整光譜錐形漸層。
- 06文字漸層 — 將漸層套用到背景，然後使用 background-clip: text。
完全在您的瀏覽器中執行
漸層產生器 100% 在用戶端執行 — 沒有資料被傳送到任何伺服器。預覽由您的瀏覽器自己的 CSS 引擎呈現，這表示您看到的內容與任何訪客的瀏覽器使用相同 CSS 呈現的內容相符。
一個實用提示：電子郵件用戶端對 CSS 漸層的支援仍不穩定。如果您將產生的 CSS 貼到 HTML 電子郵件範本中，請在漸層宣告之前新增 solid background-color 備用方案，以便舊版用戶端上的收件者看到合理的內容。
CSS 漸層產生器常見問題
線性、徑向和錐形漸層有什麼區別？
線性漸層沿著給定角度的直線過渡。徑向漸層從中心點向外擴展 — 對於亮點和聚光燈效果很有用。錐形漸層像時針一樣繞著中心掃掠 — 非常適合圓形段和色輪。
我可以用這個在 Tailwind CSS 專案中使用嗎？
是的。複製產生的值並將其用作 Tailwind 任意值，例如：bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]。Tailwind 會將其包含在您的輸出樣式表中。
預覽確切符合我在即時網站上看到的內容嗎？
是的 — 預覽由將呈現您的即時 CSS 的相同瀏覽器漸層引擎呈現，所以輸出是像素精確的。
我可以在電子郵件範本中使用 CSS 漸層嗎？
大多數電子郵件用戶端不能可靠地支援 CSS 漸層。始終在漸層宣告之前新增 solid background-color 作為備用方案。
色彩停止點數量有限制嗎？
產生器支援最多六個停止點。對於大多數設計，兩到四個已足夠；超過六個往往會降低清晰度而不是增加豐富度。