CSS 漸層產生器

用 2–5 個色標建立線性或置中放射漸層，預覽瀏覽器原生 CSS，並在本機複製樣式。

02 / 類型與方向

選擇漸層形式

角度（deg）

CSS 角度：0° 向上、90° 向右；滑桿與數值欄位都能調整。

03 / 色標

3 / 5

拖曳滑桿或輸入 0–100%；輸出會依位置排序。同位置色標可形成硬邊界。

色標 1

選色HEX 色彩位置（%）

色標 2

選色HEX 色彩位置（%）

色標 3

選色HEX 色彩位置（%）

2–5 個不透明 sRGB 色標；不處理透明度或 CSS 色彩函式。

04 / 瀏覽器預覽

預覽由瀏覽器原生 CSS 繪製。漸層上的文字對比會隨位置改變，這裡不提供 WCAG 通過判定。

05 / 輸出

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

設定只留在此頁，不上傳、不儲存，也不寫入網址。檢查純色配色對比 →

選擇線性或放射漸層，調整角度或形狀，再拖曳色標或輸入精確的 HEX 與位置。複製前比對瀏覽器預覽與產生的 CSS。

本工具只支援六位不透明 sRGB 色標。漸層預覽無法證明文字對比合格；請在實際版面檢查對比最低的位置。