使用步驟
- 從預設或預設漸變開始。
- 點選色條新增顏色，拖動色標調整位置。
- 選擇線性、徑向或錐形，調整角度或中心點。
- 複製 CSS 宣告或 Tailwind 類名。
引數說明
- 線性
- 顏色沿直線變化。0° 向上，90° 向右，180° 向下。
- 徑向
- 顏色從中心點以圓形或貼合元素的橢圓向外擴散。
- 錐形
- 顏色圍繞中心點旋轉變化，像色輪或餅圖。
- 重複
- 重複漸變圖案；把色標放在很小的範圍內（如 0% 到 10%）就能做出條紋。
生成的程式碼長什麼樣
同樣的兩種顏色，用每種型別寫出來是這樣的。色標的位置始終用百分比表示：
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)Tailwind 版本是把同樣的值放進任意值類名裡，空格換成下劃線，逗號後面的空格去掉：
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]最後一行 CSS 中，圖案每隔元素的 10% 重複一次，形成細條紋。錐形漸變的角度是掃描的起始位置，徑向漸變的兩個百分比是中心位置。
常見問題
哪些瀏覽器支援？
線性、徑向和錐形漸變在 Chrome、Edge、Firefox、Safari 的當前版本中都支援，不需要瀏覽器字首。
怎麼做透明漸變？
在色標的顏色框裡輸入帶透明度的顏色，例如 #00000000 表示完全透明的黑色。
Tailwind 類名怎麼用？
直接加到元素的 class 中即可（Tailwind CSS 3 或 4），使用的是任意值寫法，不需要額外配置。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。