漸層產生器
建立線性或放射狀漸層並複製 CSS。
免費 - 無需註冊 - 在你的裝置上執行
在你的瀏覽器中本機執行
- 即時結果
- 0上傳
- 1 次點擊即可複製
- 免費無需帳戶
可以放心的地方
- 0上傳
- 你的輸入留在你的裝置上
- 不會傳送任何資料進行處理
- 即時輸出
- 結果在工作區即時更新
- 變更輸入並立即比較
- 1 次點擊即可複製
- 複製結果
- 無需帳戶或安裝
漸層產生器 規格一覽
- 輸入
- 漸層類型、角度和兩個或更多顏色停靠
- 輸出
- 即時漸層預覽和可複製的 CSS。
- 方法
- 直接在瀏覽器中組合的原生 CSS 漸層
- 色階點與形狀
- 每點可調位置，最少兩點
- 價格
- 免費
- 處理位置
- 在你的裝置上
漸層產生器 怎麼用
- 1
選類型與角度
先挑線性或放射狀，再設定你要的角度。
- 2
安排色標
每個色標各有顏色與位置，可以新增或刪除。上方的漸層帶會隨著改動重畫。
- 3
複製 CSS
結果是一行寫好的 background 語法，按「複製結果」就能貼進樣式表。
常見問題
這可以在不上傳任何東西的情況下運作嗎？
可以。此工具會在瀏覽器分頁內處理你的輸入。不會傳送到處理伺服器，也不會儲存在帳戶中。
我可以在複製前變更結果嗎？
可以。調整任何可用的控制項，結果就會更新。只有在輸出符合你的需求時才複製。
支援哪些瀏覽器？
目前版本的 Chrome、Edge、Firefox 和 Safari 支援此處使用的瀏覽器功能。非常舊的瀏覽器可能缺少所需的 API。
怎樣避免漸層中間發灰
色環上距離過遠的兩個顏色，交界處會經過灰色。在中間加一個色相居中的色標，就能保住中段的飽和度。
- 角度自正上方順時針計算：0deg 由下往上，90deg 由左往右，135deg 為對角線。
- 放射狀漸層不看角度。想改變顏色交界的位置，請調整色標的百分比。
完整規格
| 輸入 | 漸層類型、角度和兩個或更多顏色停靠點。 |
|---|---|
| 輸出 | 即時漸層預覽和可複製的 CSS。 |
| 方法 | 直接在瀏覽器中組合的原生 CSS 漸層。 |
| 色階點與形狀 | 每個色階點都有 0–100％ 位置滑桿，可逐個刪到剩兩個為止。選放射狀之後，角度欄會自動收起。 |
| 價格 | 免費。由工作區外標示清楚的廣告支援。 |
| 處理位置 | 在你的瀏覽器分頁中。你的輸入絕不會被上傳。 |
用同一批檔案繼續做
全部色彩工具： SPOTTOOLS 的色彩工具