CSS 漸層產生器

視覺化建立 CSS 漸層

漸層能為按鈕、主視覺區塊、卡片與背景增添層次感與色彩，且完全不需要任何圖片檔。然而，手寫 CSS 意味著必須盲猜角度與百分比，還要不斷重新整理網頁看效果。這個 CSS 漸層產生器讓你能透過即時預覽，視覺化地設計漸層，並提供乾淨、可直接複製且支援所有現代瀏覽器的 CSS 程式碼。

功能特色

• 三種漸層類型：線性 (linear)、放射狀 (radial，圓形或橢圓) 及圓錐狀 (conic)。
• 最多八個顏色節點，可自由拖曳調整位置。
• 角度滑桿，適用於線性與圓錐狀漸層。
• 預設樣式與隨機按鈕，快速激發設計靈感。
• 備用純色已包含在 CSS 程式碼中。
• 一鍵複製程式碼。

如何使用 CSS

將程式碼貼到你想設定樣式的元素 CSS 規則中：

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

在 CSS 中，漸層屬於圖片的一種，因此你也可以將其應用在 background-image 屬性中。你可以使用逗號分隔來堆疊多個漸層，或是與照片結合使用：例如 background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); 能將背景圖片變暗，確保上方的白色文字清晰易讀。

設計技巧

• 保持柔和。 兩個相鄰的色相（例如藍色到紫色、橘色到粉紅色）會比對比色看起來更平滑、更具現代感。
• 檢查對比度。 如果漸層背景上有文字，請確保文字在漸層的兩端都清晰可讀 —— 您可以使用 色彩轉換器 來測試顏色，它會顯示對比度。
• 從品牌圖片中擷取顏色，可以使用 圖片選色器。
• 增加立體感，透過 區塊陰影產生器 為卡片和按鈕增添層次。