---
title: "CSS 漸層與流動漸層"
canonical: https://tw-web-motion.panda198271.workers.dev/gradient
markdown: https://tw-web-motion.panda198271.workers.dev/gradient.md
date_modified: 2026-09-26
retrieved: 2026-09-27
language: zh-Hant-TW
content_sha256: 6db9d544b325b8a648ccbab01fa7ffc9cb5af2711d6dcb3b4f40581305e76132
cite: https://tw-web-motion.panda198271.workers.dev/cite?path=%2Fgradient
sources:
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  - https://web.dev/articles/animations-guide
---

# CSS 漸層與流動漸層

**重點摘要**：CSS 漸層產生器支援線性、放射、圓錐 3 種漸層，最多 8 個顏色，可做流動動態背景（預設 135 度、12 秒一個週期、背景尺寸 400%）與漸層文字，並自動在減少動態模式下停止動畫。

```css
.gradient-bg {
  background: linear-gradient(135deg, #ff7a59, #8a3ffc, #12c2e9, #ff7a59);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-bg { animation: none; }
}

.gradient-text {
  background: linear-gradient(135deg, #ff7a59, #8a3ffc, #12c2e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

API：https://tw-web-motion.panda198271.workers.dev/api/gradient?colors=&type=linear|radial|conic&angle=&animate=1


## 常見問題

### 流動漸層是怎麼做的？

把漸層背景放大到 400% 400%，再用 @keyframes 讓 background-position 在 0% 與 100% 之間來回移動；本站預設 12 秒一個週期，可設 2 到 120 秒。

### 漸層文字怎麼寫？

把漸層設為文字元素的背景，加上 background-clip: text（含 -webkit- 前綴），再把文字顏色設為 transparent，漸層就只會顯示在文字形狀內。

### 漸層最多可以放幾個顏色？

本站產生器至少需要 2 個、最多 8 個 HEX 顏色；圓錐漸層會自動把第 1 個顏色補在最後，讓頭尾銜接不斷色。

## 參考來源

- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
- [web.dev：高效能 CSS 動畫](https://web.dev/articles/animations-guide)

---
整理於 2026-09-26。網頁版：https://tw-web-motion.panda198271.workers.dev/gradient

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092718）：https://weathered-star-a206.panda198271.workers.dev
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12