CSS 漸層產生器

CSS 漸層怎麼用？

CSS 的 linear-gradient 和 radial-gradient 可以讓背景從一個顏色平滑過渡到另一個。用在 hero section、按鈕、卡片背景都很好看。但手寫角度和色值很難微調，用這個工具拖一拖就能看到效果，確定了再複製 CSS。

Linear 跟 Radial 差在哪？

linear-gradient 是從一邊到另一邊的直線漸層，可以設定角度——0deg 是從下到上，90deg 是從左到右，180deg 是從上到下。大部分的 hero banner、按鈕背景用 linear 就夠了。radial-gradient 是從中心向外擴散的圓形漸層，適合做聚光燈效果、hover 光暈、或是比較有設計感的背景。兩種都可以放多個色標，做出更複雜的漸層效果。

好看的配色怎麼挑？

最安全的做法是用同色系的深淺變化，像是深藍到淺藍、深紫到粉紫。想要活潑一點可以用相鄰色，像是橘到粉紅、藍到綠。盡量避免互補色直接漸層（像紅配綠），中間會出現灰灰髒髒的過渡色。如果你沒靈感，可以參考現在流行的漸層風格：glassmorphism 常用半透明白到透明、Aurora 風格用藍綠紫的柔和過渡。

漸層比圖片好在哪？

CSS 漸層不用額外載入圖片檔案，所以頁面載入速度更快、不會吃頻寬。而且漸層是向量的，不管螢幕多大、多高解析度都不會糊掉。響應式設計的時候也不用準備不同尺寸的背景圖。唯一要注意的是，太複雜的漸層（十幾個色標加動畫）在低階手機上可能會有效能問題，但一般 2-3 個色標完全沒問題。