CSS 工作流程

CSS 漸層色標、硬邊界與文字對比

漸層是由 CSS 繪製的影像。少數精確色標就能做出實用背景；但光看預覽，無法判斷文字在每個位置是否都清楚可讀。

內容更新：2026-09-29 · 維護者與修正回報

設定方向與色標位置

線性漸層的 0deg 向上，90deg 向右。放射漸層從中心向外擴展，圓形與橢圓的形狀不同；本工具固定中心，不提供任意位置。

每個色標使用六位不透明 sRGB HEX 與 0–100% 的整數位置。工具產生 CSS 時按位置排序；兩個同位置色標可形成硬邊界，並保留輸入先後順序。2–5 個色標是編輯器限制，不是 CSS 規範限制。

預覽使用瀏覽器原生漸層渲染。外觀仍受元素實際尺寸、色彩呈現與周邊樣式影響。請將樣式貼進目標元件，以真正尺寸檢查。

產生的規則包含純色 background-color 備援；不產生重複或圓錐漸層、透明圖層、廣色域插值、下載圖片或儲存專案。

漸層上的文字可能在某一區符合對比要求，在另一區不符合。純色對比工具只檢查一組配色，不能代表整條漸層或疊在其上的文字。請在實際渲染背景上檢查各處文字與狀態，特別留意與文字顏色最接近的區域。

若無法維持足夠對比，請改變配色或為文字加上純色底。不要只憑漸層預覽或單一取樣配色宣稱符合 WCAG。

.banner {
  background-color: #315460;
  background-image: linear-gradient(90deg, #315460 0%, #C48969 50%, #E8BC8F 100%);
}

資料可信度