CSS 漸層產生器

功能簡介

CSS 漸層產生器讓你直觀地調出漸層，再複製最終的 CSS。選擇線性、放射狀或圓錐漸層，加入任意多個色標，拖曳它們的位置，設定角度或中心點，預覽會立即更新。也可以貼上現有的 linear-gradient(…)、radial-gradient(…) 或 conic-gradient(…) 程式碼，以視覺化方式繼續編輯。所有操作都在瀏覽器中完成。

使用方法

1. 從某個預設開始，或沿用範例漸層。
2. 選擇「類型」。線性和圓錐漸層有角度；放射狀和圓錐漸層有中心點，可用「中心 X」「中心 Y」移動。
3. 編輯「色標」：用取色器或直接輸入任何 CSS 顏色來修改顏色，拖曳「位置」移動色標，「新增色標」會在間距最大處插入一個，「反轉」可倒轉順序。
4. 開啟「重複」讓漸層平鋪，做出條紋和圓環。
5. 從「CSS」卡片複製程式碼，需要時勾選純色備援以相容非常舊的瀏覽器。

底部的「漸層 CSS」方塊顯示漸層值並可編輯：把樣式表或設計工具中的漸層貼進去，上方的控制項會自動讀取。

範例

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

做好漸層的小技巧

• 適度就好。 相鄰色相（藍到紫、橘到粉）比互補色過渡更順，互補色在中間容易變成灰濁的顏色。
• 加一個中間色標 來控制過渡。比兩側稍亮的第三個色標能做出柔和的高光。
• 硬邊做形狀。 位置相同的色標會形成銳利邊緣，條紋、旗幟、進度條和圓餅圖都用這個技巧。
• 方向。 to right 等於 90deg，to bottom（預設）等於 180deg。角度從正上方開始順時針計算。
• 漸層上的文字 要在整個漸層範圍內都清楚可讀。用對比檢查工具分別檢查最亮和最暗的色標與文字顏色的對比。