分類: 開發工具
CSS 漸層產生器
做出線性或放射漸層並複製 CSS
挑兩到三個顏色、調整角度、即時預覽效果，然後複製可直接貼上的 background-image 宣告。全部在瀏覽器中算繪。
輸出
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
漸層用眼睛判斷比手寫程式快，所以本工具會在你調整參數時，把真正的 CSS 畫在預覽區上。可以選擇帶角度的線性漸層，或從中心擴散的放射漸層；需要三段過渡時再加一個中間色，最後把宣告直接複製進樣式表。
使用方式
- 選擇線性或放射漸層。
- 選好起始色與結束色，需要時再加中間色。
- 調整角度，然後複製 CSS 宣告。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 會上傳任何內容嗎？
- 不會。預覽是瀏覽器繪製的 CSS 背景，宣告也在頁面內組成，不會送到伺服器。
- 需要加瀏覽器前綴嗎？
- 現代瀏覽器不需要。不帶前綴的 linear-gradient 與 radial-gradient 已經支援多年。
- 角度朝哪個方向？
- 在 CSS 中，0deg 是由下往上，角度依順時針增加，因此 90deg 是由左至右，180deg 是由上往下。