開發者免費本機執行
CSS 漸變產生器
構建線性、徑向和錐形 CSS 漸變——拖動色標、選擇顏色、複製 CSS。
預覽
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);類型
預設
新增最多 6 個顏色停止點，拖動位置滑塊，複製 CSS。
關於CSS 漸變產生器
Handytool 的 CSS 漸變產生器用最多六個色標構建線性、徑向和錐形漸變。拖動色標的位置，更改其顏色，切換漸變類型，即時預覽和 CSS 宣告會立即更新。從內置預設之一開始——Lime Swiss、Sunset、Sky、Aurora——或從頭開始設計。
CSS 漸變產生器功能
- 01
線性、徑向和錐形
線性是日常背景漸變；徑向適合高光和漸暈；錐形完美適合餅圖、色輪和旋轉背景。
- 02
最多六個色標
新增和刪除色標，用滑桿設定每個位置，通過系統拾色器或十六進位值選擇其顏色。色標按位置自動重新排序。
- 03
可複製的 CSS 宣告
輸出是完整的 background: ... 宣告，可直接貼到樣式表、樣式組件或 Tailwind 任意值類中。
CSS 漸變產生器常見問題
- 線性、徑向和錐形有什麼區別？
- 線性漸變沿給定角度的直線執行；徑向漸變從中心向外傳播；錐形漸變像時針一樣圍繞一個點旋轉。每一個都適合不同的視覺效果。
- 我應該使用多少個色標？
- 兩個色標是經典的雙色漸變。三個或四個讓您建立逼真的過渡（日落、極光）。超過六個往往看起來很嘈雜——這就是為什麼此產生器限制為六個。
- 我可以為電子郵件範本中的背景使用此嗎？
- 大多數電子郵件用戶端仍然不可靠地支援現代 CSS 漸變——如果將此複製到電子郵件範本中，請提供純色回退以及背景漸變。
- 輸出像素精確嗎？
- 是的——預覽由瀏覽器的本地漸變引擎呈現，所以您看到的正是您的 CSS 將產生的。