CSS 漸層的運作原理與類型
CSS 漸層是網頁設計中用於建立平滑顏色過渡的強大工具，常用於網頁背景設計。本工具支援三種主要的漸層類型，每種都有其獨特的色彩分佈規則：
- 線性：色彩沿著一條直線進行過渡，其過渡的方向由設定的角度決定。
- 放射：色彩從中心點向外擴散，呈現圓形或橢圓形的漸層效果。
- 圓錐：色彩圍繞著一個中心點旋轉一圈，其視覺效果類似於色輪。
線性漸層的方向與角度控制
在線性漸層中，色彩過渡的軌跡是一條直線。這條直線的方向由角度參數決定。
本工具的角度滑桿採用標準的度數制，其中 0° 代表方向朝上，而 90° 則代表方向朝右。隨著角度數值的調整，漸層的起點與終點會隨之旋轉，進而改變色彩在網頁背景上的流向。
放射與圓錐漸層的形狀與分佈
放射漸層與圓錐漸層不使用角度來決定方向，而是依賴形狀與中心點來分佈色彩：
- 放射漸層：不使用角度滑桿。使用者可以選擇「橢圓」或「圓形」兩種形狀，色彩會從中心點向外均勻擴散。
- 圓錐漸層：色彩繞著中心點掃描一圈。與線性漸層類似，圓錐漸層亦可透過角度滑桿來設定其起始旋轉角度，其中 0° 朝上，90° 朝右。
色標的配置與定位規則
色標是決定漸層色彩細節的核心要素。每個色標都包含一個特定的顏色值與一個代表位置的百分比。
- 位置區間：色標的位置範圍為 0% 至 100%，其中 0% 代表漸層的起點，100% 代表漸層的終點。
- 預設初始值：工具啟動時，初始漸層包含兩個色標，分別為位置 0% 的
#6366f1與位置 100% 的#ec4899。 - 新增色標：點擊「新增色標」按鈕可增加色彩節點，新加入的色標預設位置為 50%。
- 數量限制：漸層最多可設定八個色標。當色標數量達到八個時，「新增色標」按鈕將會轉為停用狀態。
漸層產生器操作指南
本工具提供直覺的介面，協助設計師與前端開發人員快速調整並取得所需的 CSS 程式碼：
- 選擇漸層類型：在「漸層類型」中選擇「線性」、「放射」或「圓錐」。
- 調整方向或形狀：若選擇「線性」或「圓錐」，可透過「角度」滑桿調整方向；若選擇「放射」，則可在「形狀」中選擇「橢圓」或「圓形」。
- 編輯色標：在「色標」區域中，可針對每個色標設定「色標顏色」與「位置」。若需增加色彩，點擊「新增色標」；若需減少，點擊「刪除色標」。
- 複製程式碼：在「CSS 程式碼」區域會即時顯示產生的 CSS 語法。點擊「複製 CSS」按鈕，該按鈕會轉變為「複製成功」，代表程式碼已成功複製至剪貼簿。
瀏覽器本機處理與隱私說明
本工具的運作完全在用戶端進行。每個漸層都在你的瀏覽器裡繪製，這裡設定的內容不會上傳到 BroBroGo。所有數值計算、即時預覽渲染以及 CSS 程式碼的產生，皆在您的本機瀏覽器內完成。
常見問題
線性、放射、圓錐漸層有什麼差別?
線性漸層讓顏色沿著一條直線過渡,方向由角度決定;放射漸層從中心向外擴散,可以是圓形或橢圓;圓錐漸層則繞著中心轉一圈,像色輪一樣。
色標是什麼?
每個色標就是固定在漸層某個位置上的一種顏色——起點是 0%,終點是 100%。拖動色標可以改變這個顏色最濃的位置,多加幾個色標能讓過渡更豐富,最多可以加八個。
要怎麼控制漸層方向?
線性和圓錐漸層的方向由角度滑桿控制,0° 朝上,90° 朝右。放射漸層沒有角度,改選圓形或橢圓來調整它擴散的樣子。