【常見CSS掃盲之漸變效果】好看的24種CSS漸變效果彙總（附源碼）

在網頁設計中，漸變效果是一種常見的視覺元素，它能夠為網站增加深度和美感。CSS提供了許多方法來實現這種效果，從簡單的基本線性漸變到複雜的 radial gradients 和 conic-gradient 等。以下將介紹 24 種 CSS 漸變效果的實例，並提供相應的 HTML 和 CSS 代碼供參考。這些例子不僅展示了各種漸變的可能性，還可以作為創建獨特且吸引人的網頁設計靈感。

1. 單色漸變 (Single Color Gradient)

background: linear-gradient(to right, #3f51b5, #673ab7);

2. 雙色漸變 (Two-Color Gradient)

background: linear-gradient(90deg, rgba(255, 206, 229, 1) 0%, rgba(253, 228, 136, 1) 100%);

3. 三色漸變 (Three-Color Gradient)

background: -webkit-linear-gradient(left, red, yellow, green);
background: -o-linear-gradient(bottom left, red, yellow, green);
background: -moz-linear-gradient(bottom left, red, yellow, green);
background: linear-gradient(to bottom left, red, yellow, green);

4. 角度漸變 (Angle Gradient)

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 300% 300%;
animation: gradient 15s ease infinite;

5. 圓形漸變 (Radial Gradient)

background: radial-gradient(ellipse at center, white 0%,#ccc 100%);

6. 多邊形漸變 (Polygon Gradient)

background: repeating-polygon linear-gradient(transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);

7. 旋轉漸變 (Rotating Gradient)

background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-size: 1800% 1800%;
animation: grad 30s ease infinite;

8. 文字漸變 (Text Gradient)

color: linear-gradient(red, orange, yellow);

9. 圖片背景漸變 (Image Background Gradient)

background: url('image.jpg'), linear-gradient(to right, #ccc, #aaa);
background-blend-mode: multiply;

10. 不規則矩形漸變 (Irregular Rectangle Gradient)

background: linear-gradient(45deg, #ff0000 30%, #ffff00 30%, #ffff00 35%, #00ff00 35%, #00ff00 40%, #00ffff 40%, #00ffff 45%, #0000ff 45%, #0000ff 50%, #ff00ff 50%, #ff00ff 55%, #ff0000 55%);
background-size: 600% 600%;
animation: change 30s ease infinite;

11. 彩虹漸變 (Rainbow Gradient)

background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #00ebff, #0000ff);

12. 斜紋漸變 (Trellis Gradient)

background: linear-gradient(45deg, rgb(147, 195, 247), rgb(147, 195, 247) 40%, transparent 40%), linear-gradient(135deg, rgb(147, 195, 247), rgb(147, 195, 247) 40%, transparent 40%), linear-gradient(45deg, rgb(232, 232, 232) 50%, transparent 50%), linear-gradient(135deg, rgb(232, 232, 232) 50%, transparent 50%);
background-position: 0 0, 0 100%, 100% 0, 100% 100%;
background-repeat: repeat;
background-size: 200% 200%;

13. 波浪漸變 (Wave Gradient)

background: linear-gradient(90deg, #fff, #eee), linear-gradient(180deg, #fff 50%, #eee 50%);
background-size: 20vw 10vh, 20vw 10vh;
background-position: top left, center;
mix-blend-mode: screen;

14. 水彩風漸變 (Watercolor Gradient)

background: linear-gradient(147deg, #fdfbfb 40%, #fdfbfb 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(225deg, #fdfbfb 40%, #fdfbfb 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(315deg, #fdfbfb 40%, #fdfbfb 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(405deg, #fdfbfb 40%, #fdfbfb 40%, rgba(255, 255, 255, 0) 40%);
background-size: 200% auto, 200% auto, 200% auto, 200% auto;
animation: pulse 15s ease infinite;

15. 橢圓形漸變 (Elliptical Gradient)

background: radial-gradient(ellipse farthest-corner at center center, hsl(359, 100%, 50%), hsl(290, 100%, 50%));

16. 星漸變 (Platinum Star Gradient)

background: radial-gradient(circle closest-side at 35% 45%, #fdeec1, #ffeaa5, #ffeedc, #ffecd8, #ffeec5, #ffedd7, #ffddcc, #ffddcd, #ffdedd, #ffece9, #ffedef, #fbebeb, #faecea, #facfd6, #f9dfdc, #f8dee4, #f7dee6, #f6dee8, #f5dee9, #f4dee9, #f3dee9, #f2dee9, #f1dee9, #f0dee9, #effede, #efecec, #edeca9, #ecee94, #ecda8e, #ebbd87, #eaac81, #e99d7a, #e88e71, #e77f67, #e66f5c, #e55f50, #e44f43, #e33f36, #e22f28, #e11f19, #e00f07, #df0f01, #ee0e01);

17. 菱形漸變 (Diamond Gradient)

background: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(135deg, black 50%, transparent 50%), linear-gradient(315deg, black 50%, transparent 50%), linear-gradient(225deg, black 50%, transparent 50%);
background-size: 2rem 2rem;
background-position: 0 0, 1rem 0, 1rem 1rem, 0 1rem;

18. 棋盤格漸變 (Chessboard Gradient)

background: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) calc(50% - 1px), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.7) calc(50% + 1px), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7)), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(135deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(315deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(225deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
background-size: 25px 25px;

19. 木紋漸變 (Wood Grain Gradient)

background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15)), linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15));
background-attachment: fixed;

20. 大理石花紋漸變 (Marble Pattern Gradient)

background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15)), linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15)), linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15)), linear-gradient(225deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15));
background-size: 200px 200px;

21. 雲朵漸變 (Cloudy Gradient)

background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 30%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.2)), linear-gradient(135deg, rgba(255, 255, 255, 0.2) 30%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.2)), linear-gradient(315deg, rgba(255, 255, 255, 0.2) 30%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.2)), linear-gradient(225deg, rgba(255, 255, 255, 0.2) 30%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.2));
background-size: 200px 200px;

22. 水霧漸變 (Mist Gradient)

background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 60%);

23. 鑲嵌玻璃漸變 (Stained Glass Gradient)

background: linear-gradient(to bottom right, rgba(255, 0, 0, 0.75), rgba(255, 128, 0, 0.75), rgba(255, 255, 0, 0.75), rgba(0, 255, 0, 0.75), rgba(0, 255, 255, 0.75), rgba(0, 0, 255, 0.75), rgba(255, 0, 255, 0.75), rgba(255, 0, 0, 0.75));
background-size: 400% 400%;
animation: change 10s ease infinite;

24. 光束漸變 (Beam Gradient)

background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%), linear-gradient(315deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%), linear-gradient(225deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%), linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%);
background-size: 100px 100px;

以上僅為 CSS 漸變效果的一小部分示例，實際上，你可以根據需要創造出無數種不同的漸變樣式。通過結合不同類型的漸變、混合模式 (blend modes) 和動畫，你能夠製作出令人驚嘆的效果，為網頁設計增添光彩。

請注意，上述 CSS 代碼中的 `animation` 屬性可能會涉及到 CSS 動畫的相關知識，如果想要使漸變動態呈現，你可能需要熟悉 CSS 動畫的工作原理以及如何設置關鍵字如 `duration` (持續時間)、`timing-function` (速度曲線) 和 `iteration-count` (重復次數)。此外，對於某些特定的漸變效果，你可能需要使用 Webkit 的專有屬性前綴 (`-webkit-`)，因為這些屬性可能在所有瀏覽器中尚未完全標準化。

總結來說，CSS 漸變功能強大且易於使用，它可以幫助你快速創建豐富多彩的網頁界面，提升用戶體驗。透過本文所分享的範例，希望你能獲得一些靈感和技巧，應用在你的網頁設計項目中。