CSS 漸層產生器

三種漸層類型

• Linear（線性）：從一端到另一端的直線過渡。最常用、Hero banner、卡片背景。 角度 0° = 由下到上、90° = 由左到右、180° = 由上到下。
• Radial（放射）：從中心點向外擴散。光暈、聚焦效果、按鈕高光。
• Conic（圓錐）：以中心點為軸，顏色繞圈旋轉。圓餅圖、彩虹、計時器圓環。

怎麼用 CSS

複製產出的代碼貼進 CSS：

.hero {
  background: linear-gradient(135deg, #c1170c 0%, #fbe3dd 100%);
  /* 或：background-image: linear-gradient(...) */
}

Tailwind 用戶：可以直接寫 bg-[linear-gradient(135deg,_#c1170c_0%,_#fbe3dd_100%)] （注意空格要改底線）。

設計建議

• 顏色站不要超過 5 個：太多會雜亂，視覺重心散
• 45° / 135°：最好看的線性方向，避免水平垂直死板
• 同色系微差：subtle gradient（差 10-20 度色相）最現代
• 避免彩虹：除非真要鮮豔風
• 注意文字對比：漸層背景上的文字要選對比夠的色