CSS 漸層產生器

什麼是CSS 漸層產生器？

CSS 漸層（gradient）不需要圖片檔，只用 CSS 程式碼就能讓兩種以上的顏色自然銜接成背景。常用於按鈕、橫幅與卡片背景，比圖片更輕量，在任何螢幕尺寸都能清晰呈現。

在這個產生器中拖曳角度轉盤或色標，預覽和 linear-gradient、radial-gradient、conic-gradient 程式碼都會同步更新。

使用方法

1. 從線性、放射狀、圓錐中選擇漸層類型。
2. 線性與圓錐漸層可轉動轉盤，或用滑桿、數字設定角度；放射狀漸層則選擇形狀與中心位置。
3. 拖曳色條上的圓點調整位置，點色條空白處或+ 新增顏色即可增加顏色。也可以在下方清單精確輸入顏色與位置（%）。
4. 效果滿意後，按複製 CSS 貼到樣式表中。

漸層類型與語法

線性漸層的角度中，0deg 是由下往上（↑），90deg 由左往右（→），180deg 由上往下（↓）。顏色後面的 % 是該顏色完整呈現的位置；把兩個顏色放在同一位置，就能做出界線分明的條紋。

設計小技巧

• 兩個高彩度的互補色混在一起，中間容易變成混濁的灰色。可以改用色環上相近的兩色，或在中間多加一個較亮的顏色。
• 在漸層上放文字時，請確認最亮與最暗的部分文字都清楚易讀，可以用色碼轉換工具的對比度檢查。
• CSS 第一行 background: 單色; 是給非常舊的瀏覽器使用的備用顏色。