什麼時候該用圓錐漸層?

圓錐漸層非常適合圓餅效果、色輪與抽象旋轉背景。它繞著中心點旋轉,這是線性與徑向漸層做不到的。現代瀏覽器引擎都已穩定支援。

雙色漸層的混濁中段該怎麼避免?

新增一個感知上平衡的中間節點,或選擇亮度相近的顏色。互補色透過 RGB 中點混合會產生灰色——在 OKLCH 中手動挑選中點即可避免。

輸出是標準 CSS,可直接用於任何 Web 情境。對於設計工具,可以複製個別色彩節點,並在 Figma 或 Sketch 中重現漸層。

支援。任何色彩節點都可以帶 Alpha 通道。適合做出邊緣淡出至背景的效果,或以半透明節點疊加多層漸層。

不會。產生過程完全在您的瀏覽器中執行。

CSS 漸層產生器

注重隱私的設計 — 完全在您的瀏覽器中執行

在瀏覽器中以視覺方式建立線性與徑向 CSS 漸層。Toova 讓您放置色彩節點、調整角度、切換漸層類型,並匯出可直接貼上的 CSS——而且不會把任何內容上傳到伺服器。

線性漸層沿著由角度或方向關鍵字定義的直線推進。徑向漸層由中心點向外擴散。圓錐漸層則繞著一個角度旋轉——非常適合做出圓餅圖風格的背景或色輪效果。Toova 全部都透過視覺控制提供,讓您不必背熟每一個 CSS 語法變體,也能做出想要的漸層。

沿著漸層條拖動色彩節點,以控制每個顏色起止的位置。Toova 不限制節點數量,想加多少就加多少。利用緩動預設引入非線性插值,可以避免簡單雙色漸層中常見的混濁灰中段。CSS 輸出使用所有現代瀏覽器都支援的標準屬性。

每一個漸層都在您的瀏覽器本機產生。您挑選的顏色、放置的節點與輸出 CSS——都不會離開頁面。對於漸層而言這雖然有點過頭,但這代表工具快速可靠,網頁載入後可離線運作。使用期間 Network 分頁會保持空白。

什麼時候該用圓錐漸層?: 圓錐漸層非常適合圓餅效果、色輪與抽象旋轉背景。它繞著中心點旋轉,這是線性與徑向漸層做不到的。現代瀏覽器引擎都已穩定支援。
雙色漸層的混濁中段該怎麼避免?: 新增一個感知上平衡的中間節點,或選擇亮度相近的顏色。互補色透過 RGB 中點混合會產生灰色——在 OKLCH 中手動挑選中點即可避免。
可以匯出成其他格式嗎?: 輸出是標準 CSS,可直接用於任何 Web 情境。對於設計工具,可以複製個別色彩節點,並在 Figma 或 Sketch 中重現漸層。
支援透明度嗎?: 支援。任何色彩節點都可以帶 Alpha 通道。適合做出邊緣淡出至背景的效果,或以半透明節點疊加多層漸層。
我的資料會被送到任何地方嗎?: 不會。產生過程完全在您的瀏覽器中執行。