CSS 漸層產生器

做出漸層，並複製它背後的 CSS。

免費 - 無需註冊 - 在你的裝置上執行

在你的瀏覽器分頁中執行

  • 2種漸層
  • CSS可直接貼
  • 即時預覽
  • 0上傳
規格

CSS 漸層產生器 規格一覽

輸入
類型、角度和兩個以上色階
輸出
預覽與可複製的 CSS
類型
線性與放射狀
預覽哪裡來
瀏覽器畫你的 CSS
價格
免費
需要帳戶
無
處理位置
在你的裝置上
使用方法

CSS 漸層產生器 怎麼用

  1. 1

    選類型

    選線性或放射狀。

  2. 2

    設定色階

    設定色階。

  3. 3

    複製 CSS

    複製 CSS。

問題

常見問題

可以加幾個色階？

看這段漸層需要幾個。兩個就能做出最單純的漸層，每多一個，瀏覽器就多一個要經過的顏色點。

預覽會和我的頁面一樣嗎？

預覽是瀏覽器拿你複製的同一段 CSS 畫的，只要元素尺寸一樣，貼到哪裡就長什麼樣。

可以把漸層存成圖片嗎？

不行。這個面板給的是 CSS。需要檔案而不是樣式規則的話，得另外想辦法產生。

漸層會被送到哪裡嗎？

不會。它在這個瀏覽器分頁裡組成，不會上傳，也不會存進任何帳戶。

背景說明

耐看的漸層

選線性或放射狀，設定角度，色階要幾個就加幾個。預覽就是這段 CSS 本身，所以你看到的和你複製走的是同一個東西。

  • 兩個明度接近的色階混得順，差太多容易看到色帶。
  • 文字壓在漸層上，兩端遇到的背景不一樣，最深和最淺處都要看。
  • 線性漸層改動最大的是角度，先把角度定下來再細調顏色。
  • 把規則貼在元素的背景上，並記得給元素一個尺寸去填。

完整規格

CSS 漸層產生器 的完整規格
輸入漸層類型、角度，以及兩個以上的色階。
輸出即時預覽，以及畫出它的那段 CSS，可直接複製。
類型線性與放射狀，都是原生 CSS 漸層組出來的。
預覽哪裡來瀏覽器拿你要複製的同一段 CSS 畫出來的。
價格免費。由工作區外標示清楚的廣告支援。
需要帳戶不需要。
處理位置在你的瀏覽器分頁中。你的輸入絕不會被上傳。
下一步

用同一批檔案繼續做

全部色彩工具： SPOTTOOLS 的色彩工具